-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1403 lines (1189 loc) · 52.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<title>Djot 中文文档</title>
<link href="./typo.less.css" rel="stylesheet" />
</head>
<body class="typo">
<h1><mark>Djot</mark> Chinese Docs <span class="typo-subtitle">Unoffical</span></h1>
<p>
<b>Djot</b> (/dʒɑt/) 是一种由 John MacFarlane 教授创造的轻型标记语法。 它从 <a href="http://commonmark.org/">CommonMark</a> 中派生出大部分的功能，不过它修复了一些让 CommonMark 语法复杂且难以有效解析的问题，并且它的功能也比 CommonMark 更加全面，支持定义列表、脚注、表格、一些新的内联格式（如插入、删除、突出显示、上标、下标等）、数学、智能标点符号、可应用在任何属性的元素，以及用于块级、内联及原始内容的通用容器。该项目最初是为了实现 John MacFarlane 教授在 <a href="http://johnmacfarlane.net/beyond-markdown.html">Beyond Markdown</a> 中提出的一些想法。
</p>
<ul>
<li><a href="http://djot.net/">官方网站</a></li>
<li><a href="http://djot.net/playground">在线体验</a></li>
<li><a href="http://github.com/jgm/djot">源代码库</a>，包括
<ul>
<li>一个快速的纯 Lua 解析器。</li>
<li>自定义 Pandoc Reader，可以将 Djot 文档转换为 Pandoc 支援的任何格式。</li>
<li>自定义 Pandoc Writer，可以将被 Pandoc 支持的任何格式的文档转换为 Djot 文档。
</ul>
</li>
<li>如果你是 Markdown 的使用者，你可以看看同样由我们翻译的 <a href="#快速开始">给 Markdown 用户的快速开始</a>。</li>
</ul>
<div class="typo-index">
<h1>Index</h1>
<ul>
<li>
<a href="#语法定义">Djot 的语法定义</a>
<ul>
<li>
<a href="#语法定义.内联语法">内联语法</a>
<ul>
<li>
<a href="#语法定义.内联语法.优先级">优先级</a>
</li>
<li>
<a href="#语法定义.内联语法.普通文本">普通文本</a>
</li>
<li>
<a href="#语法定义.内联语法.链接">链接</a>
<ul>
<li>
<a href="#语法定义.内联语法.链接.内联链接">内联链接</a>
</li>
<li>
<a href="#语法定义.内联语法.链接.参考链接">参考链接</a>
</li>
</ul>
</li>
<li>
<a href="#语法定义.内联语法.图片">图片</a>
</li>
<li>
<a href="#语法定义.内联语法.自动链接">自动链接</a>
</li>
<li>
<a href="#语法定义.内联语法.图片">图片</a>
</li>
<li>
<a href="#语法定义.内联语法.自动链接">自动链接</a>
</li>
<li>
<a href="#语法定义.内联语法.内联代码">内联代码</a>
</li>
<li>
<a href="#语法定义.内联语法.强调">粗体/斜体（强调）</a>
</li>
<li>
<a href="#语法定义.内联语法.高亮">高亮</a>
</li>
<li>
<a href="#语法定义.内联语法.上下标">上/下标</a>
</li>
<li>
<a href="#语法定义.内联语法.插入删除">插入/删除</a>
</li>
<li>
<a href="#语法定义.内联语法.智能标点符号">智能标点符号</a>
</li>
<li>
<a href="#语法定义.内联语法.数学">数学</a>
</li>
<li>
<a href="#语法定义.内联语法.脚注参考">脚注参考</a>
</li>
<li>
<a href="#语法定义.内联语法.硬换行">硬换行</a>
</li>
<li>
<a href="#语法定义.内联语法.注释">注释</a>
</li>
<li>
<a href="#语法定义.内联语法.Emoji">Emoji</a>
</li>
<li>
<a href="#语法定义.内联语法.原始内联">原始内联</a>
</li>
<li>
<a href="#语法定义.内联语法.行内Span">行内 Span</a>
</li>
<li>
<a href="#语法定义.内联语法.内联属性">内联属性</a>
</li>
</ul>
</li>
<li>
<a href="#语法定义.块级元素语法">块级元素语法</a>
<ul>
<li>
<a href="#语法定义.块级元素语法.段落">段落</a>
</li>
<li>
<a href="#语法定义.块级元素语法.标题">标题</a>
</li>
<li>
<a href="#语法定义.块级元素语法.引用块">引用块</a>
</li>
<li>
<a href="#语法定义.块级元素语法.项目清单">项目清单</a>
<ul>
<li>
<a href="#语法定义.块级元素语法.项目清单.任务列表">任务列表</a>
</li>
<li>
<a href="#语法定义.块级元素语法.项目清单.定义列表">定义列表</a>
</li>
</ul>
</li>
<li>
<a href="#语法定义.块级元素语法.列表">列表</a>
</li>
<li>
<a href="#语法定义.块级元素语法.代码块">代码块</a>
</li>
<li>
<a href="#语法定义.块级元素语法.分隔线">分隔线</a>
</li>
<li>
<a href="#语法定义.块级元素语法.原始内容">原始内容</a>
</li>
<li>
<a href="#语法定义.块级元素语法.Div">Div</a>
</li>
<li>
<a href="#语法定义.块级元素语法.表格">表格</a>
</li>
<li>
<a href="#语法定义.块级元素语法.参考链接定义">参考链接定义</a>
</li>
<li>
<a href="#语法定义.块级元素语法.脚注">脚注</a>
</li>
<li>
<a href="#语法定义.块级元素语法.块级属性">块级属性</a>
</li>
<li>
<a href="#语法定义.块级元素语法.标题链接">标题链接</a>
</li>
</ul>
</li>
<li>
<a href="#语法定义.嵌套限制">嵌套限制</a>
</li>
</ul>
</li>
<li>
<a href="#快速开始">给 Markdown 用户的快速开始</a>
<ul>
<li>
<a href="#快速开始.空行">空行</a>
</li>
<li>
<a href="#快速开始.列表">列表</a>
</li>
<li>
<a href="#快速开始.标题">标题</a>
</li>
<li>
<a href="#快速开始.代码块">代码块</a>
</li>
<li>
<a href="#快速开始.引用">引用</a>
</li>
<li>
<a href="#快速开始.链接">链接</a>
</li>
<li>
<a href="#快速开始.强制换行符">强制换行符</a>
</li>
<li>
<a href="#快速开始.原始HTML">原始HTML</a>
</li>
<li>
<a href="#快速开始.表格">表格</a>
</li>
</ul>
</li>
</ul>
</div>
<h2 id="语法定义">Djot 的语法定义</h2>
<div>
<h3 id="语法定义.内联语法">内联语法</h3>
<div>
<h4 id="语法定义.内联语法.优先级">优先级</h4>
<div>
<p>
在 Djot 中，大多数内联语法是由环绕内联内容的开闭定界符定义的。例如，将其定义为强调的内容，或定义为链接文本。 管理内联容器的「优先级」的基本原则是：最先被关闭的容器优先级较高。 这是因为容器不能重叠，所以一旦一个开启的内联容器被关闭，在开启者和关闭者之间的任何潜在开启者都被视为普通文本，而不被视为内联语法。例如：
</p>
<div class="typo-code">
<pre><div>Djot</div><code>_This is *regular_ not strong* emphasis</code></pre>
<pre><div>HTML</div><code><p><em>This is *regular</em> not strong* emphasis</p></code></pre>
</div>
<p>这是因为第一个「_」打开的强调先被第二个「_」关闭，而这时第一个 「*」就不再有资格打开强调。不过在以下代码中：</p>
<div class="typo-code">
<pre><div>Djot</div><code>*This is _strong* not regular_ emphasis</code></pre>
<pre><div>HTML</div><code><p><strong>This is _strong</strong> not regular_ emphasis</p></code></pre>
</div>
<p>和上方正好相反！依此类推，在链接中也是一样的情况</p>
<div class="typo-code">
<pre><div>Djot</div><code>[Link *](url)*</code></pre>
<pre><div>HTML</div><code><p><a href="url">Link *</a>*</p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.普通文本">普通文本</h4>
<div>
<p>在 Djot 中，任何没有赋予特殊含义的内容都会被解析为普通文本。<br>
所有 ASCII 标点字符（甚至那些在 Djot 中没有特殊含义的字符）都可以透过反斜杠转义。 因此，「\*」 会被解析为「*」这个字符。 在 ASCII 标点符号字符外的字符前的反斜杠仅被视为文字反斜杠，但以下情况除外：
</p>
<ul>
<li>换行符前的反斜杠（或换行符后的空格或制表符前）被解析为硬换行符。 在这种情况下，将忽略反斜杠前的空格和制表符。</li>
<li>将空格解析为不间断空格之前的反斜杠。</li>
</ul>
</div>
<h4 id="语法定义.内联语法.链接">链接</h4>
<div>
<p>Djot 中有两种链接，内联链接和参考链接。
两种类型都以 [ … ] 分隔符内的链接文本（可能包含任意内联格式）开头。<br>
</p>
<h5 id="语法定义.内联语法.链接.内联链接">内联链接</h5>
<div>
内联链接在 [ … ] 分隔符后面输入圆括号，圆括号内部包含目标链接。 链接文本末尾的「]」和定义目标链接的开启「(」之间不应有空格。示例如下：
<div class="typo-code">
<pre><div>Djot</div><code>[Example](http://example.com/)</code></pre>
<pre><div>HTML</div><code><p><a href="http://example.com/">Example</a></p></code></pre>
</div>
<p>目标链接的 URL 可以换行，在此情况下，换行符和任何前导或尾随空格都被忽略，并且这些行被连接在一起。</p>
<div class="typo-code">
<pre><div>Djot</div><code>[Example](http://example.com/?id=1145
14)</code></pre>
<pre><div>HTML</div><code><p><a href="http://example.com/?id=114514">Example</a></p></code></pre>
</div>
</div>
<h5 id="语法定义.内联语法.链接.参考链接">参考链接</h5>
<div>
<p>参考链接在 [ … ] 后面接上 [ … ] 标签，而不是圆括号。和内联链接一样，两个方括号中间不应有空格。</p>
<div class="typo-code">
<pre><div>Djot</div><code>[Example][ExLink]
[ExLink]: http://example.com/</code></pre>
<pre><div>HTML</div><code><p><a href="http://example.com/">Example</a></p></code></pre>
</div>
<p>参考标签应当在文档中的某处定义：请参阅下面的参考链接定义。 但是，链接的解析是「本地」的，不依赖于标签是否被定义：</p>
<div class="typo-code">
<pre><div>Djot</div><code>[Example][ExLink]</code></pre>
<pre><div>HTML</div><code><p><a>Example</a></p></code></pre>
</div>
<p>如果标签为空，则链接文本也被视为参考标签：</p>
<div class="typo-code">
<pre><div>Djot</div><code>[Example][]
[Example]: http://example.com/</code></pre>
<pre><div>HTML</div><code><p><a href="http://example.com/">Example</a></p></code></pre>
</div>
</div>
</div>
<h4 id="语法定义.内联语法.图片">图片</h4>
<div>
<p>图片类似于链接，不过在链接前面有一个「!」前缀。和链接一样，具有内联和引用变体。</p>
<div class="typo-code">
<pre><div>Djot</div><code>
![picture of a cat][cat]
![cat][]
[cat]: feline.jpg</code></pre>
<pre><div>HTML</div><code><p><img alt="picture of a cat" src="cat.jpg"></p>
<p><img alt="picture of a cat" src="feline.jpg"></p>
<p><img alt="cat" src="feline.jpg"></p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.自动链接">自动链接</h4>
<div>
<p>包含在 <...> 中的 URL 或电子邮件地址会自动成为超链接。 尖括号之间的内容按字面意思处理（不能使用反斜杠转义）。</p>
<div class="typo-code">
<pre><div>Djot</div><code><https://pandoc.org/lua-filters>
<me@example.com></code></pre>
<pre><div>HTML</div><code><p><a href="https://pandoc.org/lua-filters">https://pandoc.org/lua-filters</a>
<a href="mailto:me@example.com">me@example.com</a></p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.内联代码">内联代码</h4>
<div>
<p>内联代码以一串连续的反引号字符 「`」开头，以等长的连续反引号字符字符串结束。</p>
<div class="typo-code">
<pre><div>Djot</div><code>``Verbatim with a backtick` character``
`Verbatim with three backticks ``` character`</code></pre>
<pre><div>HTML</div><code><p><code>Verbatim with a backtick` character</code>
<code>Verbatim with three backticks ``` character</code></p></code></pre>
</div>
<p>反引号之间的内容被视为内联代码（反引号转义在此处不起作用）。<br>
如果内容想要以反引号字符开始或结束，只需在开始或结束反引号与内容之间加入一个空格：</p>
<div class="typo-code">
<pre><div>Djot</div><code>`` `foo` ``</code></pre>
<pre><div>HTML</div><code><p><code>`foo`</code></p></code></pre>
</div>
<p>如果要解析为内联的内容在遇到结束反引号字符串之前结束，则内联代码文本将一直扩展到末尾：</p>
<div class="typo-code">
<pre><div>Djot</div><code>`foo bar</code></pre>
<pre><div>HTML</div><code><p><code>foo bar</code></p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.强调">斜体/粗体（强调）</h4>
<div>
<p>斜体内容由「_」字符分隔，粗体内容则由「*」字符分隔。</p>
<div class="typo-code">
<pre><div>Djot</div><code>_emphasized text_
*strong emphasis*</code></pre>
<pre><div>HTML</div><code><p><em>emphasized text</em></p>
<p><strong>strong emphasis</strong></p></code></pre>
</div>
<p>开始强调的「_」或「*」只有在后面不是直接接空格时才可以开始强调，而用于关闭强调的「_」或「*」也需要在前面不直接有空格，并且除了定界符以外还有其他字符的情况下，才能关闭强调：</p>
<div class="typo-code">
<pre><div>Djot</div><code>_ Not emphasized (spaces). _
___ (not an emphasized `_` character)</code></pre>
<pre><div>HTML</div><code><p>_ Not emphasized (spaces). _</p>
<p>___ (not an emphasized <code>_</code> character)</p></code></pre>
</div>
<p>强调也可以嵌套：</p>
<div class="typo-code">
<pre><div>Djot</div><code>__emphasis inside_ emphasis_</code></pre>
<pre><div>HTML</div><code><p><em><em>emphasis inside</em> emphasis</em></p></code></pre>
</div>
<p>花括号可以强制将「_」或「*」解释为开始或结束强调（也就是说，可以无视上上段文本）。</p>
<div class="typo-code">
<pre><div>Djot</div><code>{_ this is emphasized, despite the spaces! _}</code></pre>
<pre><div>HTML</div><code><p><em> this is emphasized, despite the spaces! </em></p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.高亮">高亮</h4>
<div>
<p>「{=」和「=}」之间的内联内容会被视为高亮文本（即 HTML 中的 <mark> 标签）。请注意，「{」和「}」是强制性的：</p>
<div class="typo-code">
<pre><div>Djot</div><code>This is {=highlighted text=}.</code></pre>
<pre><div>HTML</div><code><p>This is <mark>highlighted text</mark>.</p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.上下标">上/下标</h4>
<div>
<p>上标使用「^」作为分隔符，而下标则用「~」作为分隔符：</p>
<div class="typo-code">
<pre><div>Djot</div><code>H~2~O and djot^TM^</code></pre>
<pre><div>HTML</div><code><p>H<sub>2</sub>O and djot<sup>TM</sup></p></code></pre>
</div>
<p>可以使用花括号，但并不是必须的：</p>
<div class="typo-code">
<pre><div>Djot</div><code>H{~one two buckle my shoe~}O</code></pre>
<pre><div>HTML</div><code><p>H<sub>one two buckle my shoe</sub>O</p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.插入删除">插入/删除</h4>
<div>
<p>要将内联内容标记为插入，请使用「{+」及「+}」包裹之，而要将内联内容标记为删除，则使用「{-」及「-}」包裹之。请注意，「{」和「}」是强制性的：</p>
<div class="typo-code">
<pre><div>Djot</div><code>My boss is {-mean-}{+nice+}.</code></pre>
<pre><div>HTML</div><code><p>My boss is <del>mean</del><ins>nice</ins>.</p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.智能标点符号">智能标点符号</h4>
<div>
<p>直双引号（"）及单引号（'）会被解析为弯引号。Djot 非常擅长从上下文中找出正确的引号方向：</p>
<div class="typo-code">
<pre><div>Djot</div><code>"Hello," said the spider.
"'Shelob' is my name."</code></pre>
<pre><div>HTML</div><code><p>“Hello,” said the spider.
“‘Shelob’ is my name.”</p></code></pre>
</div>
<p>不过，可以透过使用大括号将引号标记为开头或结尾以覆盖它的启发式方法：</p>
<div class="typo-code">
<pre><div>Djot</div><code>'}Tis Socrates' season to be jolly!</code></pre>
<pre><div>HTML</div><code><p>’Tis Socrates’ season to be jolly!</p></code></pre>
</div>
<p>如果你想使用直引号，请使用反斜杠转义：</p>
<div class="typo-code">
<pre><div>Djot</div><code>5\'11\"</code></pre>
<pre><div>HTML</div><code><p>5'11"</p></code></pre>
</div>
<p>三个句点「...」被解析为省略号，三个连字符「---」被解析为破折号，两个连字符「--」被解析为连接号：</p>
<div class="typo-code">
<pre><div>Djot</div><code>57--33 oxen---and no sheep...</code></pre>
<pre><div>HTML</div><code><p>57–33 oxen—and no sheep…</p></code></pre>
</div>
<p>较长的连字符序列分为 破折号、连接号 和 省略号； 当可以用任意一种方式实现统一时，Djot 解析器会优先解析为破折号。 <sub>此处可能有翻译问题</sub>（因此，四个连字符变成两个连接号，六个连字符变成两个破折号）。</p>
</div>
<h4 id="语法定义.内联语法.数学">数学</h4>
<div>
<p>要在文档中包含 LaTeX 数学，请将 LaTeX 放置在内联代码块内，并在其前面加上「$」（用于内联数学）或「$$」（用于数学容器）：</p>
<div class="typo-code">
<pre><div>Djot</div><code>Einstein derived $`e=mc^2`.
Pythagoras proved
$$` x^n + y^n = z^z `</code></pre>
<pre><div>HTML</div><code><p>Einstein derived <span class="math inline">\(e=mc^2\)</span>.
Pythagoras proved
<span class="math display">\[ x^n + y^n = z^z \]</span></p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.脚注参考">脚注参考</h4>
<div>
<p>使用脚注参考，只需要在方括号中加入「^」符号。</p>
<div class="typo-code">
<pre><div>Djot</div><code>Here is the reference.[^foo]
[^foo]: And here is the note.</code></pre>
<pre><div>HTML</div><code><p>Here is the reference.<a id="fnref1" href="#fn1" role="doc-noteref"><sup>1</sup></a></p>
<section role="doc-endnotes">
<hr>
<ol>
<li id="fn1">
<p>And here is the note.<a href="#fnref1" role="doc-backlink">↩︎︎</a></p>
</li>
</ol>
</section></code></pre>
</div>
<p>有关脚注本身的语法，请参见下面的<a href="#块状语法.脚注">脚注</a>。</p>
</div>
<h4 id="语法定义.内联语法.硬换行">硬换行</h4>
<div>
<p>内联内容中的换行符被视为“软”换行符； 它们可能呈现为空格，或者（在换行符在语义上被视为空格的上下文中，例如 HTML）作为换行符。<br>
要获得硬换行符（由 HTML 的 <br> 表示的那种），请使用反斜杠 + 换行符：</p>
<div class="typo-code">
<pre><div>Djot</div><code>This is a soft
break and this is a hard\
break.</code></pre>
<pre><div>HTML</div><code><p>This is a soft
break and this is a hard<br>
break.</p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.注释">注释</h4>
<div>
<p>在两个花括号中被两个「%」包裹住的内容将被忽略并被视为注释，允许将注释添加到属性：</p>
<div class="typo-code">
<pre><div>Djot</div><code>{#ident % later we'll add a class %}</code></pre>
<pre><div>HTML</div><code></code></pre>
</div>
<p>但它也可以作为添加注释的通用方式，只需使用仅包含注释的属性符号：</p>
<div class="typo-code">
<pre><div>Djot</div><code>Foo bar {% This is a comment, spanning
multiple lines %} baz.
</code></pre>
<pre><div>HTML</div><code><p>Foo bar baz.</p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.Emoji">Emoji</h4>
<div>
<p>可以通过在内容周围加上「:」符号来包含表情符号：</p>
<div class="typo-code">
<pre><div>Djot</div><code>My reaction is :+1: :smiley:.</code></pre>
<pre><div>HTML</div><code><p>My reaction is 👍 😃.</p></code></pre>
</div>
</div>
<h4>原始内联</h4>
<div>
<p>可以使用内联代码后跟 {=FORMAT} 来包含任何格式的原始内联内容：</p>
<div class="typo-code">
<pre><div>Djot</div><code>This is `<?php echo 'Hello world!' ?>`{=html}.</code></pre>
<pre><div>HTML</div><code><p>This is <?php echo 'Hello world!' ?>.</p></code></pre>
</div>
<p>此内容旨在在呈现指定格式时作为代码传递，否则将被忽略。</p>
</div>
<h4 id="语法定义.内联语法.行内Span">行内 Span</h4>
<div>
<p>方括号中不是链接或图像且紧跟属性的文本被视为 <span>：</p>
<div class="typo-code">
<pre><div>Djot</div><code>It can be helpful to [read the manual]{.big .red}.</code></pre>
<pre><div>HTML</div><code><p>It can be helpful to <span class="big red">read the manual</span>.</p></code></pre>
</div>
</div>
<h4 id="语法定义.内联语法.内联属性">内联属性</h4>
<div>
<p>属性放在大括号内，并且必须紧跟在它们所要附加的内联元素之后（中间不能有空格）。<br>
在大括号内，可以使用以下的语法：
</p>
<ul>
<li>.foo 将 foo 指定为一个类。 可以通过这种方式给出多个类， 它们将会被合并。</li>
<li>#foo 将 foo 指定为标识符。 一个元素应该只有一个标识符； 如果给出多个标识符，则使用最后一个。</li>
<li>key="value" 或 key=value 指定 Key 属性。 当值完全由 ASCII 字母数字字符或 _ 或 : 或 - 组成时，不需要引号。 反斜杠转义可以用在引用值中。</li>
<li>% 开始注释，以下一个 % 或属性 (}) 结尾。</li>
</ul>
<p>属性符号可以包含换行符，以下是示例：</p>
<div class="typo-code">
<pre><div>Djot</div><code>An attribute on _emphasized text_{#foo
.bar .baz key="my value"}</code></pre>
<pre><div>HTML</div><code><p>An attribute on <em class="bar baz" id="foo" key="my value">emphasized text</em></p></code></pre>
</div>
<p>属性说明符可以“堆叠”，在这种情况下它们将被组合。 因此，</p>
<div class="typo-code">
<pre><div>Djot</div><code>avant{lang=fr}{.blue}</code></pre>
<pre><div>HTML</div><code><p><span class="blue" lang="fr">avant</span></p></code></pre>
</div>
<p>和</p>
<div class="typo-code">
<pre><div>Djot</div><code>avant{lang=fr .blue}</code></pre>
<pre><div>HTML</div><code><p>An attribute on <em class="bar baz" id="foo" key="my value">emphasized text</em></p></code></pre>
</div>
<p>是相同的。</p>
</div>
</div>
<h3 id="语法定义.块级元素语法">块级元素语法</h3>
<div>
<p>与 CommonMark 一样，块级结构可以在内联解析之前被识别，并且优先于内联结构。<br></br>
事实上，块级元素可以逐行解析而没有回溯。 「一条线对块级结构的贡献从不依赖于未来的线。」<br></br>
缩进仅对列表项或脚注嵌套有意义。<br></br>
块级项目应该用空行彼此分开。 在某些情况下，两个块级元素可以相邻——例如，主题分隔符或代码块后面可以直接跟著一个段落。 事实上，逐行解析的可能性排除了在块级元素之后需要一个空行。 但为了可读性，我们建议始终用空行分隔块级元素。 段落永远不能被其他块级元素打断，并且必须始终以空行（或文档或包含元素的末尾）结尾。</p>
<h4>段落</h4>
<div>
<p>段落是不满足成为其他块级元素之一的条件的非空行序列，文本内容被解析为一系列内联元素。<br></br>
换行符被视为软中断并被解释为格式化输出中的空格，段落以空行或文档结尾结束。</p>
</div>
<h4 id="语法定义.块级元素语法.标题">标题</h4>
<div>
<p>标题以一个或多个 # 字符序列开头，后跟空格。 # 字符的数量定义标题级别。 以下文本被解析为内联内容。</p>
<div class="typo-code">
<pre><div>Djot</div><code>## A level _two_ heading!</code></pre>
<pre><div>HTML</div><code><section id="A-level-two-heading">
<h2>A level <em>two</em> heading!</h2>
</section></code></pre>
</div>
<p>标题文本可能会溢出到后续行，这些行之前也可能有相同数量的 # 字符（但也可以省略）。<br></br>
当遇到空行（或文档或封闭容器的末尾）时，标题结束。</p>
<div class="typo-code">
<pre><div>Djot</div><code># A heading that
# takes up
# three lines
A paragraph, finally</code></pre>
<pre><div>HTML</div><code><section id="A-heading-that-takes-up-three-lines">
<h1>A heading that
takes up
three lines</h1>
<p>A paragraph, finally</p>
</section></code></pre>
</div>
<div class="typo-code">
<pre><div>Djot</div><code># A heading that
takes up
three lines
A paragraph, finally.</code></pre>
<pre><div>HTML</div><code><section id="A-level-two-heading">
<h2>A level <em>two</em> heading!</h2>
</section></code></pre>
</div>
</div>
<h4 id="语法定义.块级元素语法.引用块">引用块</h4>
<div>
<p>块引用是一个多行元素，每一行都以「>」开头，后跟一个空格或行尾。 块引用的内容（减去首字母「>」）被解析为块级内容。</p>
<div class="typo-code">
<pre><div>Djot</div><code>> This is a block quote.
>
> 1. with a
> 2. list in it.</code></pre>
<pre><div>HTML</div><code><blockquote>
<p>This is a block quote.</p>
<ol>
<li>
with a
</li>
<li>
list in it.
</li>
</ol>
</blockquote></code></pre>
</div>
<p>与在 Markdown 中一样，可以「懒惰地」省略块引用内常规段落行中的 > 前缀，但在段落的第一行前面除外：</p>
<div class="typo-code">
<pre><div>Djot</div><code>> This is a block
quote.</code></pre>
<pre><div>HTML</div><code><blockquote>
<p>This is a block
quote.</p>
</blockquote></code></pre>
</div>
</div>
<h4 id="语法定义.块级元素语法.项目清单">项目清单</h4>
<div>
<p>列表项由列表标记和空格（或换行符）组成，相对于列表标记缩进。 例如：</p>
<div class="typo-code">
<pre><div>Djot</div><code>1. This is a
list item.
> containing a block quote</code></pre>
<pre><div>HTML</div><code><ol>
<li>
<p>This is a
list item.</p>
<blockquote>
<p>containing a block quote</p>
</blockquote>
</li>
</ol></code></pre>
</div>
<p>段落第一行之后的段落行可以「懒惰地」省略缩进：</p>
<div class="typo-code">
<pre><div>Djot</div><code>1. This is a
list item.
Second paragraph under the
list item.</code></pre>
<pre><div>HTML</div><code><ol>
<li>
<p>This is a
list item.</p>
<p>Second paragraph under the
list item.</p>
</li>
</ol></code></pre>
</div>
<p>可以使用以下基本类型的列表标记：</p>
<ul>
<li>
无序列表
<ul>
<li>-</li>
<li>+</li>
<li>*</li>
</ul>
</li>
<hr>
<li>
有序列表
<ul>
十进制
<li>1.</li>
<li>1)</li>
<li>(1)</li>
<hr>
小写字母
<li>a)</li>
<li>(a)</li>
<hr>
大写字母
<li>A)</li>
<li>(A)</li>
<hr>
小写罗马数字
<li>i)</li>
<li>(i)</li>
<hr>
大写罗马数字
<li>I.</li>
<li>I)</li>
<li>(I)</li>
<hr>
定义
<li>:</li>
<hr>
任务
<li>- []</li>
</ul>
</li>
</ul>
<p>有序列表标记可以使用系列中的任何数字：因此，(xix) 和 v) 都是有效的小写罗马枚举标记，并且 v) 也是有效的小写字母枚举标记。</p>
<h5 id="语法定义.块级元素语法.项目清单.任务列表">任务列表</h5>
<div>
<p>以「[ ]」、「[X]」或「[x]」 开头后跟空格的项目符号列表项是任务列表，未选中的使用「([ ])」，而已选中的使用「([X])」或「([x]）」。</p>
</div>
<h5 id="语法定义.块级元素语法.项目清单.定义列表">定义列表</h5>
<div>
<p>在定义列表项中，「:」 标记之后的第一行或多行被解析为内联内容并被视为定义的符号。 项目中包含的任何其他块都被假定为定义：</p>
<div class="typo-code">
<pre><div>Djot</div><code>: orange
A citrus fruit.</code></pre>
<pre><div>HTML</div><code><dl>
<dt>orange</dt>
<dd>
<p>A citrus fruit.</p>
</dd>
</dl></code></pre>
</div>
</div>
</div>
<h4 id="语法定义.块级元素语法.列表">列表</h4>
<div>
<p>列表只是一系列相同类型的列表项（上表中的每一行都定义了一个类型）。 请注意，更改有序列表样式或项目符号将停止一个列表并开始一个新列表。 因此，以下列表项被分为四个不同的列表：</p>
<div class="typo-code">
<pre><div>Djot</div><code>i) one
i. one (style change)
+ bullet
* bullet (style change)</code></pre>
<pre><div>HTML</div><code><ol start="9" type="a">
<li>
one
</li>
</ol>
<ol start="9" type="a">
<li>
one (style change)
</li>
</ol>
<ul>
<li>
bullet
</li>
</ul>
<ul>
<li>
bullet (style change)
</li>
</ul></code></pre>
</div>
<p>有时列表项的类型不明确。在这种情况下，如果可能的话，将以继续列表的方式解决问题。 例如：</p>
<div class="typo-code">
<pre><div>Djot</div><code>i. item
j. next item</code></pre>
<pre><div>HTML</div><code><ol start="9" type="a">
<li>
item
</li>
<li>
next item
</li>
</ol></code></pre>
</div>
<p>第一项在「小写罗马文字」和「小写英文字母」之间不明确。 但只有后一种解释适用于下一项，因此解析器会解析为允许我们拥有一个连续列表而不是两个单独列表的阅读。</p>
<p>有序列表的起始编号由第一项的编号决定，而后续的列表项的数量无关紧要：
<div class="typo-code">
<pre><div>Djot</div><code>5) five
8) six</code></pre>
<pre><div>HTML</div><code><ol start="5">
<li>
five
</li>
<li>
six
</li>
</ol></code></pre>
</div>
<p>如果列表在项目之间或项目内部的块之间不包含空行，则该列表被归类为紧凑列表。 列表开头或结尾的空行不计入紧密度。</p>
<div class="typo-code">
<pre><div>Djot</div><code>- one
- two
- sub
- sub</code></pre>
<pre><div>HTML</div><code><ul>
<li>
one
</li>
<li>
two
<ul>
<li>
sub
</li>
<li>
sub
</li>
</ul>
</li>
</ul></code></pre>
</div>
<p>不紧凑的清单是松的。 这种区别的预期意义在于：呈现紧凑列表时，项目之间的空间应该更小。</p>
<div class="typo-code">
<pre><div>Djot</div><code>- one
- two</code></pre>
<pre><div>HTML</div><code><ul>
<li>
<p>one</p>
</li>
<li>
<p>two</p>
</li>
</ul></code></pre>
</div>
</div>
<h4 id="语法定义.块级元素语法.代码块">代码块</h4>
<div>
<p>代码块以一行三个或更多个连续的反引号开始，可以选择后跟一个语言说明符，但没有其他内容。 （语言说明符可以选择在前面和/或后面加上空格。）代码块到一行反引号或者文档或封闭块的末尾结束，反引号长度等于或大于开始反引号「围栏」。 其内容被解释为内联代码。 如果内容包含一行反引号，请务必选择更长的反引号字符串用作「围栏」：</p>
<div class="typo-code">
<pre><div>Djot</div><code>````
This is how you do a code block:
``` ruby
x = 5 * 6
```
````</code></pre>
<pre><div>HTML</div><code><pre><code>This is how you do a code block:
``` ruby
x = 5 * 6
```
</code></pre></code></pre>
</div>
<p>这是一个代码块的示例，当它的父容器关闭时，该代码块将会隐式关闭：</p>
<div class="typo-code">
<pre><div>Djot</div><code>> ```
> code in a
> block quote
Paragraph.</code></pre>
<pre><div>HTML</div><code><blockquote>
<pre><code>code in a
block quote
</code></pre>
</blockquote>
<p>Paragraph.</p></code></pre>
</div>
</div>
<h4 id="语法定义.块级元素语法.分隔线">分隔线</h4>
<div>
<p>包含三个或更多「*」或「-」 字符且没有其他任何内容（空格或制表符除外）的行将被视为分隔线（<hr> 在 HTML 中）。 与 Markdown 不同，分隔线可以缩进：</p>
<div class="typo-code">
<pre><div>Djot</div><code>Then they went to sleep.
* * * *
When they woke up, ...</code></pre>
<pre><div>HTML</div><code><p>Then they went to sleep.</p>
<hr>
<p>When they woke up, …</p></code></pre>
</div>
</div>
<h4 id="语法定义.块级元素语法.原始内容">原始内容</h4>
<div>
<p>带有「=FORMAT」的代码块通常会被解释为 FORMAT 中的原始内容，并以代码传递该格式输出。例如：</p>
<div class="typo-code">
<pre><div>Djot</div><code>``` =html
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
```</code></pre>
<pre><div>HTML</div><code><video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video></code></pre>
</div>
</div>
<h4 id="语法定义.块级元素语法.Div">Div</h4>
<div>
<p>一个 div 以一行三个或更多个连续的冒号开头，后面可以选择空格和类名（不过不可以有其他内容）。 它以至少与开头符号一样长的一行连续冒号，或包含块的末尾做结。</p>
<p>Div 內容是一个块级元素。</p>
<div class="typo-code">
<pre><div>Djot</div><code>::: warning
Here is a paragraph.