-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathja-syntax.html
1616 lines (1584 loc) · 59.4 KB
/
ja-syntax.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 xmlns="http://www.w3.org/1999/xhtml" lang xml:lang>
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Djot syntax reference</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<style type="text/css">html {
line-height: 1.4;
font-family: Georgia, serif;
font-size: 18px;
color: #1a1a1a;
background-color: #fdfdfd;
}
body {
display: flex;
margin: 0 auto;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
padding-bottom: 50px;
hyphens: auto;
overflow-wrap: break-word;
text-rendering: optimizeLegibility;
font-kerning: normal;
}
@media (max-width: 600px) {
body {
font-size: 0.9em;
padding: 1em;
}
h1 {
font-size: 1.8em;
}
}
@media print {
body {
background-color: transparent;
color: black;
font-size: 12pt;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3, h4 {
page-break-after: avoid;
}
}
p {
margin: 1em 0;
}
a {
color: #1a1a1a;
}
a:visited {
color: #1a1a1a;
}
img {
max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 1.4em;
}
h1 {
margin-top: 0.4em;
}
h5, h6 {
font-size: 1em;
font-style: italic;
}
h6 {
font-weight: normal;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
ol, ul {
padding-left: 1.7em;
margin-top: 1em;
}
li > ol, li > ul {
margin-top: 0;
}
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-left: 2px solid #e6e6e6;
color: #606060;
}
code {
font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
font-size: 85%;
margin: 0;
}
pre {
margin: 1em 0;
overflow: auto;
}
pre code {
padding: 0;
overflow: visible;
overflow-wrap: normal;
}
.sourceCode {
background-color: transparent;
overflow: visible;
}
hr {
background-color: #1a1a1a;
border: none;
height: 1px;
margin: 1em 0;
}
table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
overflow-x: auto;
display: block;
font-variant-numeric: lining-nums tabular-nums;
}
table caption {
margin-bottom: 0.75em;
}
tbody {
margin-top: 0.5em;
border-top: 1px solid #1a1a1a;
border-bottom: 1px solid #1a1a1a;
}
tr {
vertical-align: top;
}
th {
border-top: 1px solid #1a1a1a;
padding: 0.25em 0.5em 0.25em 0.5em;
}
td {
padding: 0.125em 0.5em 0.25em 0.5em;
}
header {
margin-bottom: 4em;
text-align: center;
}
section.level1 {
max-width: 44em;
position: relative;
order: 1;
max-width: 48em;
min-width: 300px;
padding-bottom: 60em;
}
#TOC {
order: 2;
position: sticky;
top: 2rem;
max-width: 20em;
min-width: 12em;
align-self: baseline;
background: transparent;
}
#TOC > ul {
margin-top: 1em;
margin-left: 2em;
height: 96vh;
overflow-y: scroll;
font-size: 14px;
}
#TOC li {
list-style: none;
}
#TOC ul {
padding-left: 1em;
}
#TOC > ul {
padding-left: 0;
}
#TOC a:not(:hover) {
text-decoration: none;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
.example {
display: flex;
border: 1px solid grey;
border-radius: 5px;
}
@media (max-width: 860px) {
.example {
flex-direction: column;
}
}
.example pre, .example div {
padding: 0pt 12pt 0pt 12pt;
}
.example .html {
padding: 0;
flex: 1;
flex-wrap: wrap;
}
.example .djot {
padding: 0;
flex: 1;
flex-wrap: wrap;
background-color: #ddd;
}
.example code {
font-size: 78%;
}
</style>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#djot-syntax-reference" id="toc-djot-syntax-reference">Djot構文リファレンス</a>
<ul>
<li><a href="#inline-syntax" id="toc-inline-syntax">インライン構文</a>
<ul>
<li><a href="#precedence" id="toc-precedence">優先順位</a></li>
<li><a href="#ordinary-text" id="toc-ordinary-text">通常テキスト</a></li>
<li><a href="#link" id="toc-link">リンク</a></li>
<li><a href="#image" id="toc-image">画像</a></li>
<li><a href="#autolink" id="toc-autolink">自動リンク</a></li>
<li><a href="#verbatim" id="toc-verbatim">Verbatim</a></li>
<li><a href="#emphasisstrong" id="toc-emphasisstrong">強調と強い強調（Emphasis/strong）</a></li>
<li><a href="#highlighted" id="toc-highlighted">ハイライト（mark）</a></li>
<li><a href="#supersubscript" id="toc-supersubscript">上付きと下付き（Super/subscript）</a></li>
<li><a href="#insertdelete" id="toc-insertdelete">挿入と取り消し線（Insert/delete）</a></li>
<li><a href="#smart-punctuation" id="toc-smart-punctuation">スマート句読点</a></li>
<li><a href="#math" id="toc-math">数式</a></li>
<li><a href="#footnote-reference" id="toc-footnote-reference">脚注参照</a></li>
<li><a href="#line-break" id="toc-line-break">改行</a></li>
<li><a href="#comment" id="toc-comment">コメント</a></li>
<li><a href="#symbols" id="toc-symbols">記号</a></li>
<li><a href="#raw-inline" id="toc-raw-inline">Rawインライン</a></li>
<li><a href="#span" id="toc-span">スパン</a></li>
<li><a href="#inline-attributes" id="toc-inline-attributes">インライン属性</a></li>
</ul></li>
<li><a href="#block-syntax" id="toc-block-syntax">ブロック構文</a>
<ul>
<li><a href="#paragraph" id="toc-paragraph">段落</a></li>
<li><a href="#heading" id="toc-heading">見出し</a></li>
<li><a href="#block-quote" id="toc-block-quote">引用ブロック</a></li>
<li><a href="#list-item" id="toc-list-item">リスト項目</a></li>
<li><a href="#list" id="toc-list">リスト</a></li>
<li><a href="#code-block" id="toc-code-block">コードブロック</a></li>
<li><a href="#thematic-break" id="toc-thematic-break">水平線（hr）</a></li>
<li><a href="#raw-block" id="toc-raw-block">Rawブロック</a></li>
<li><a href="#div" id="toc-div">Div</a></li>
<li><a href="#pipe-table" id="toc-pipe-table">パイプテーブル</a></li>
<li><a href="#reference-link-definition" id="toc-reference-link-definition">参照リンクの定義</a></li>
<li><a href="#footnote" id="toc-footnote">脚注</a></li>
<li><a href="#block-attributes" id="toc-block-attributes">ブロックの属性</a></li>
<li><a href="#links-to-headings" id="toc-links-to-headings">見出しへのリンク</a></li>
</ul></li>
<li><a href="#nesting-limits" id="toc-nesting-limits">ネストの制限</a></li>
</ul></li>
</ul>
</nav>
<section id="djot-syntax-reference" class="level1">
<h1>Djot構文リファレンス</h1>
<section id="inline-syntax" class="level2">
<h2>インライン構文</h2>
<section id="precedence" class="level3">
<h3>優先順位</h3>
<p>ほとんどのインライン構文は、インラインコンテンツを囲む前後の区切り文字によって定義され、強調表示またはリンクテキストなどとして定義されます。インラインコンテナの「優先順位」を決定する基本原則は、最初に閉じられたオープナーが優先されるということです。コンテナは重複できないため、オープナーが閉じられると、オープナーとクローザーの間の潜在的なオープナーは通常のテキストとしてマークされ、インライン構文を開くことができなくなります。たとえば、</p>
<div class="example">
<div class="djot">
<pre><code>_This is *regular_ not strong* emphasis</code></pre>
</div>
<div class="html">
<pre><code><p><em>This is *regular</em> not strong* emphasis</p>
</code></pre>
</div>
</div>
<p>最初の強調 <code>_</code> によって開かれた通常の強調は2番目の <code>_</code> によって閉じられ、その時点で強い強調 <code>*</code> は強い強調を開始する資格を失います。</p>
<div class="example">
<div class="djot">
<pre><code>*This is _strong* not regular_ emphasis</code></pre>
</div>
<div class="html">
<pre><code><p><strong>This is _strong</strong> not regular_ emphasis</p>
</code></pre>
</div>
</div>
<p>逆もまた同じです。</p>
<p>同様に、</p>
<div class="example">
<div class="djot">
<pre><code>[Link *](url)*</code></pre>
</div>
<div class="html">
<pre><code><p><a href="url">Link *</a>*</p>
</code></pre>
</div>
</div>
<p>はリンクの処理だけ行われます。</p>
<div class="example">
<div class="djot">
<pre><code>*Emphasis [*](url)</code></pre>
</div>
<div class="html">
<pre><code><p><strong>Emphasis [</strong>](url)</p>
</code></pre>
</div>
</div>
<p>リンクは無効です（強い強調が区切り文字 <code>[</code> を超えて終了するため）。</p>
<p>重複するコンテナは除外されますが、 <em>ネスト（入れ子に）</em> されたコンテナは問題ありません。</p>
<div class="example">
<div class="djot">
<pre><code>_This is *strong within* regular emphasis_</code></pre>
</div>
<div class="html">
<pre><code><p><em>This is <strong>strong within</strong> regular emphasis</em></p>
</code></pre>
</div>
</div>
<p>曖昧な場合は、区切り文字をオープナー <code>{</code> またはクローザー <code>}</code> としてマークに使用される場合があります。したがって、 <code>{_</code> は <code>_</code> のように動作しますが、強調を開くことしかできません。一方 <code>_}</code> は <code>_</code> のように動作しますが強調を閉じることしかできません。</p>
<div class="example">
<div class="djot">
<pre><code>{_Emphasized_}
_}not emphasized{_</code></pre>
</div>
<div class="html">
<pre><code><p><em>Emphasized</em>
_}not emphasized{_</p>
</code></pre>
</div>
</div>
<p>明示的にマークされたクローザーは明示的にマークされたオープナーとのみ一致し、マークされていないクローザーはマークされていないオープナーのみと一致します（したがって、たとえば <code>{_hi_)</code> は強調を生成しません）。</p>
<p>特定のクローザーと一致する可能性のあるオープナーが複数ある場合は、最も近いものが使用されます。例えば：</p>
<div class="example">
<div class="djot">
<pre><code>*not strong *strong*</code></pre>
</div>
<div class="html">
<pre><code><p>*not strong <strong>strong</strong></p>
</code></pre>
</div>
</div>
</section>
<section id="ordinary-text" class="level3">
<h3>通常テキスト</h3>
<p>特別な意味が与えられていないものはすべてリテラルなテキストとして解析されます。</p>
<p>すべてのASCII句読点文字（djotで特別な意味を持たないものであっても）はバックスラッシュでエスケープできます。したがって、<code>\*</code> はリテラル文字 <code>*</code> が含まれます。ASCII句読点文字以外の文字の前のバックスラッシュは、次の例外を除き、リテラルのバックスラッシュとして扱われます。</p>
<ul>
<li>改行の前（または改行に続く空白またはタブの前）のバックスラッシュは、<em>ハード改行</em>として解析されます。この場合、バックスラッシュの前の空白とタブ文字は無視されます。</li>
<li>空白の前のバックスラッシュは<em>非改行空白</em>として解析されます。</li>
</ul>
</section>
<section id="link" class="level3">
<h3>リンク</h3>
<p>リンクには、<em>インライン</em>リンクと<em>参照</em>リンクの2種類があります。</p>
<p>どちらの種類も <code>[ … ]</code> の内側でリンクテキスト（任意のインライン形式が含まれる場合があります）から始まります。</p>
<p><em>インラインリンク</em>には、括弧内にリンク先 <code>(URL)</code> が含まれます。リンクテキスト末尾の <code>]</code> とリンク先を定義するオープナー <code>(</code> の間に空白を入れてはいけません。</p>
<div class="example">
<div class="djot">
<pre><code>[My link text](http://example.com)</code></pre>
</div>
<div class="html">
<pre><code><p><a href="http://example.com">My link text</a></p>
</code></pre>
</div>
</div>
<p>URLは複数行に分かれている場合があります。この場合改行が行われ先頭と末尾の空白は無視され行が連結されます。</p>
<div class="example">
<div class="djot">
<pre><code>[My link text](http://example.com?product_number=234234234234
234234234234)</code></pre>
</div>
<div class="html">
<pre><code><p><a href="http://example.com?product_number=234234234234234234234234">My link text</a></p>
</code></pre>
</div>
</div>
<p><em>参照リンク</em>では括弧内の宛先ではなく角括弧内の参照ラベルを使用します。これはリンクテキストの直後に置く必要があります。</p>
<div class="example">
<div class="djot">
<pre><code>[My link text][foo bar]
[foo bar]: http://example.com</code></pre>
</div>
<div class="html">
<pre><code><p><a href="http://example.com">My link text</a></p>
</code></pre>
</div>
</div>
<p>参照ラベルはドキュメント内のどこかで定義する必要があります。以下の<a href="#reference-link-definition">参照リンクの定義</a>を参照してください。ただしリンクの解析は「ローカル」でありラベルが定義されているかどうかには依存しません。</p>
<div class="example">
<div class="djot">
<pre><code>[foo][bar]</code></pre>
</div>
<div class="html">
<pre><code><p><a>foo</a></p>
</code></pre>
</div>
</div>
<p>ラベルがない場合、リンクテキストはリンクテキストだけでなく参照ラベルとしても解釈されます:</p>
<div class="example">
<div class="djot">
<pre><code>[My link text][]
[My link text]: /url</code></pre>
</div>
<div class="html">
<pre><code><p><a href="/url">My link text</a></p>
</code></pre>
</div>
</div>
</section>
<section id="image" class="level3">
<h3>画像</h3>
<p>画像はリンクと同じように機能しますが、接頭辞 <code>!</code> が付いています。リンクと同様にインラインバリアントと参照バリアントの両方が可能です。</p>
<div class="example">
<div class="djot">
<pre><code>
![picture of a cat][cat]
![cat][]
[cat]: feline.jpg</code></pre>
</div>
<div class="html">
<pre><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>
</section>
<section id="autolink" class="level3">
<h3>自動リンク</h3>
<p> <code><</code> … <code>></code> で囲まれたURLまたはメールアドレスはハイパーリンクになります。中括弧間の内容は文字通りに扱われます（バックスラッシュエスケープは使用できません）。</p>
<div class="example">
<div class="djot">
<pre><code><https://pandoc.org/lua-filters>
<[email protected]></code></pre>
</div>
<div class="html">
<pre><code><p><a href="https://pandoc.org/lua-filters">https://pandoc.org/lua-filters</a>
<a href="mailto:[email protected]">[email protected]</a></p>
</code></pre>
</div>
</div>
<p>URLまたはメールアドレスには改行を含めることはできません。</p>
</section>
<section id="verbatim" class="level3">
<h3>Verbatim</h3>
<p>Verbatimコンテンツは、連続するバックティック文字（<code>`</code>）の文字列で始まり、同じ数が連続するバックティック文字の文字列で終わります。</p>
<div class="example">
<div class="djot">
<pre><code>``Verbatim with a backtick` character``
`Verbatim with three backticks ``` character`</code></pre>
</div>
<div class="html">
<pre><code><p><code>Verbatim with a backtick` character</code>
<code>Verbatim with three backticks ``` character</code></p>
</code></pre>
</div>
</div>
<p>バックティック間の内容はVerbatimテキストとして扱われます（そこではバックスラッシュ エスケープは機能しません）。</p>
<p>コンテンツがバックティック文字で開始または終了する場合、開始または終了バックティックとコンテンツの間の1つの空白が削除されます。</p>
<div class="example">
<div class="djot">
<pre><code>`` `foo` ``</code></pre>
</div>
<div class="html">
<pre><code><p><code>`foo`</code></p>
</code></pre>
</div>
</div>
<p>インラインとして解析されるテキストが、終了バックティック文字列に遭遇する前に終了する場合、Verbatimテキストは最後まで続きます。</p>
<div class="example">
<div class="djot">
<pre><code>`foo bar</code></pre>
</div>
<div class="html">
<pre><code><p><code>foo bar</code></p>
</code></pre>
</div>
</div>
</section>
<section id="emphasisstrong" class="level3">
<h3>強調と強い強調（Emphasis/strong）</h3>
<p>強調されたインラインコンテンツは <code>_</code> で囲みます。強い強調は <code>*</code> で囲みます。</p>
<div class="example">
<div class="djot">
<pre><code>_emphasized text_
*strong emphasis*</code></pre>
</div>
<div class="html">
<pre><code><p><em>emphasized text</em></p>
<p><strong>strong emphasis</strong></p>
</code></pre>
</div>
</div>
<p>また <code>_</code> は <code>*</code> 直後に空白が続かない場合にのみ強調を開始できます。強調を閉じることができるのは、直前に空白がない場合、および開始文字と終了文字の間に区切り文字以外の文字がある場合のみです。</p>
<div class="example">
<div class="djot">
<pre><code>_ Not emphasized (spaces). _
___ (not an emphasized `_` character)</code></pre>
</div>
<div class="html">
<pre><code><p>_ Not emphasized (spaces). _</p>
<p>___ (not an emphasized <code>_</code> character)</p>
</code></pre>
</div>
</div>
<p>強調はネスト（入れ子に）することができます:</p>
<div class="example">
<div class="djot">
<pre><code>__emphasis inside_ emphasis_</code></pre>
</div>
<div class="html">
<pre><code><p><em><em>emphasis inside</em> emphasis</em></p>
</code></pre>
</div>
</div>
<p>中括弧 <code>{</code> は <code>_</code> または <code>*</code> をオープナーまたはクローザーとして強制的に解釈するために使用できます。</p>
<div class="example">
<div class="djot">
<pre><code>{_ this is emphasized, despite the spaces! _}</code></pre>
</div>
<div class="html">
<pre><code><p><em> this is emphasized, despite the spaces! </em></p>
</code></pre>
</div>
</div>
</section>
<section id="highlighted" class="level3">
<h3>ハイライト（mark）</h3>
<p> <code>{=</code> と <code>=}</code> の間のインライン コンテンツは、強調表示されたテキストとして扱われます（HTMLでの <code><mark></code>）。 <code>{</code> と <code>}</code> は必須であることに注意してください。</p>
<div class="example">
<div class="djot">
<pre><code>This is {=highlighted text=}.</code></pre>
</div>
<div class="html">
<pre><code><p>This is <mark>highlighted text</mark>.</p>
</code></pre>
</div>
</div>
</section>
<section id="supersubscript" class="level3">
<h3>上付きと下付き（Super/subscript）</h3>
<p>上付き文字は <code>^</code> で囲みます、下付き文字は <code>~</code> です。</p>
<div class="example">
<div class="djot">
<pre><code>H~2~O and djot^TM^</code></pre>
</div>
<div class="html">
<pre><code><p>H<sub>2</sub>O and djot<sup>TM</sup></p>
</code></pre>
</div>
</div>
<p>中括弧を使用することもできますが、必須ではありません:</p>
<div class="example">
<div class="djot">
<pre><code>H{~one two buckle my shoe~}O</code></pre>
</div>
<div class="html">
<pre><code><p>H<sub>one two buckle my shoe</sub>O</p>
</code></pre>
</div>
</div>
</section>
<section id="insertdelete" class="level3">
<h3>挿入と取り消し線（Insert/delete）</h3>
<p>インラインテキストを挿入済みとしてマークするには、 <code>{+</code> と <code>+}</code> を使用します。削除済みとしてマークするには、 <code>{-</code> と <code>-}</code> を使用します。 <code>{</code> と <code>}</code> は必須です。</p>
<div class="example">
<div class="djot">
<pre><code>My boss is {-mean-}{+nice+}.</code></pre>
</div>
<div class="html">
<pre><code><p>My boss is <del>mean</del><ins>nice</ins>.</p>
</code></pre>
</div>
</div>
</section>
<section id="smart-punctuation" class="level3">
<h3>スマート句読点</h3>
<p>直線の二重引用符（<code>"</code>）と一重引用符（<code>'</code>）は中引用符として解析されます。Djotは、文脈からどの方向の引用が必要かを判断するのが非常に上手です。</p>
<div class="example">
<div class="djot">
<pre><code>"Hello," said the spider.
"'Shelob' is my name."</code></pre>
</div>
<div class="html">
<pre><code><p>&ldquo;Hello,&rdquo; said the spider.
&ldquo;&lsquo;Shelob&rsquo; is my name.&rdquo;</p>
</code></pre>
</div>
</div>
<p>ただし、そのヒューリスティックは中かっこを使用した引用符をオープナー <code>{"</code> またはクローザー <code>"}</code> としてマークすることでオーバーライドできます:</p>
<div class="example">
<div class="djot">
<pre><code>'}Tis Socrates' season to be jolly!</code></pre>
</div>
<div class="html">
<pre><code><p>&rsquo;Tis Socrates&rsquo; season to be jolly!</p>
</code></pre>
</div>
</div>
<p>直接引用符が必要な場合は、バックスラッシュとエスケープを使用します:</p>
<div class="example">
<div class="djot">
<pre><code>5\'11\"</code></pre>
</div>
<div class="html">
<pre><code><p>5'11"</p>
</code></pre>
</div>
</div>
<p>ピリオド3つのシーケンスは <em>ellipses</em> として解析されます。 <code>...</code> </p>
<p>ハイフン3つのシーケンスは <em>em-dash</em> として解析されます。 <code>—</code> </p>
<p>ハイフン2つのシーケンスは <em>en-dash</em> として解析されます。 <code>--</code> </p>
<div class="example">
<div class="djot">
<pre><code>57--33 oxen---and no sheep...</code></pre>
</div>
<div class="html">
<pre><code><p>57&ndash;33 oxen&mdash;and no sheep&hellip;</p>
</code></pre>
</div>
</div>
<p>より長いハイフンのシーケンスは、全角ダッシュ、半角ダッシュ、およびハイフンに分割されます。可能であれば均一に、どちらの方法でも均一性が達成できる場合は、全角ダッシュを使用することを推奨します。（つまり、4つのハイフンは2つの半角ダッシュになり、6つのハイフンは2つの半角ダッシュになります）。</p>
<div class="example">
<div class="djot">
<pre><code>a----b c------d</code></pre>
</div>
<div class="html">
<pre><code><p>a&ndash;&ndash;b c&mdash;&mdash;d</p>
</code></pre>
</div>
</div>
</section>
<section id="math" class="level3">
<h3>数式</h3>
<p>LaTeX数式を含めるには、その数式をVerbatimスパンに入れ、その先頭に <code>$</code> （インラインの場合）または <code>$$</code> （数式表示の場合）を付けます:</p>
<div class="example">
<div class="djot">
<pre><code>Einstein derived $`e=mc^2`.
Pythagoras proved
$$` x^n + y^n = z^n `</code></pre>
</div>
<div class="html">
<pre><code><p>Einstein derived <span class="math inline">\(e=mc^2\)</span>.
Pythagoras proved
<span class="math display">\[ x^n + y^n = z^n \]</span></p>
</code></pre>
</div>
</div>
</section>
<section id="footnote-reference" class="level3">
<h3>脚注参照</h3>
<p>脚注参照は、 <code>[^参照ラベル]</code> 形式を用います。</p>
<div class="example">
<div class="djot">
<pre><code>Here is the reference.[^foo]
[^foo]: And here is the note.</code></pre>
</div>
<div class="html">
<pre><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>
</div>
<p>脚注自体の構文については、以下の<a href="#footnote">脚注</a>を参照してください。</p>
</section>
<section id="line-break" class="level3">
<h3>改行</h3>
<p>インラインコンテンツ内の改行は「ソフト」改行として扱われます。これらは空白として、または（HTMLなど、改行が意味的に空白のように扱われるコンテキストでは）改行としてレンダリングされる場合があります。</p>
<p>ハード改行（HTMLでの <code><br></code>）を行うには、「バックスラッシュ + 改行」を使用します:</p>
<div class="example">
<div class="djot">
<pre><code>This is a soft
break and this is a hard\
break.</code></pre>
</div>
<div class="html">
<pre><code><p>This is a soft
break and this is a hard<br>
break.</p>
</code></pre>
</div>
</div>
</section>
<section id="comment" class="level3">
<h3>コメント</h3>
<p>属性内で <code>%</code> に挟まれた内容はコメントとして扱われます。これにより属性にコメントを追加できるようになります:</p>
<div class="example">
<div class="djot">
<pre><code>{#ident % later we'll add a class %}</code></pre>
</div>
<div class="html">
<pre><code></code></pre>
</div>
</div>
<p>ただし、コメントを追加する一般的な方法としても機能します。コメントのみを含む属性指定子を使用してください:</p>
<div class="example">
<div class="djot">
<pre><code>Foo bar {% This is a comment, spanning
multiple lines %} baz.</code></pre>
</div>
<div class="html">
<pre><code><p>Foo bar baz.</p>
</code></pre>
</div>
</div>
</section>
<section id="symbols" class="level3">
<h3>記号</h3>
<p>単語を記号 <code>:</code> で囲むと「記号」が作成され、デフォルトでは文字通りに表示されるだけですが、フィルターによって特別に処理される場合があります。（たとえば、フィルターを使用して記号を絵文字に変換できます。ただし、これはdjotには組み込まれていません）。</p>
<div class="example">
<div class="djot">
<pre><code>My reaction is :+1: :smiley:.</code></pre>
</div>
<div class="html">
<pre><code><p>My reaction is 👍 😃.</p>
</code></pre>
</div>
</div>
</section>
<section id="raw-inline" class="level3">
<h3>Rawインライン</h3>
<p>任意の形式のRawインラインコンテンツは、Verbatimスパンとそれに続く次の文字列を使用して含めることができます <code>{=FORMAT}</code> :</p>
<div class="example">
<div class="djot">
<pre><code>This is `<?php echo 'Hello world!' ?>`{=html}.</code></pre>
</div>
<div class="html">
<pre><code><p>This is <?php echo 'Hello world!' ?>.</p>
</code></pre>
</div>
</div>
<p>このコンテンツは、指定された形式をレンダリングするときにそのまま渡されるように意図されていますが、それ以外の場合は無視されます。</p>
</section>
<section id="span" class="level3">
<h3>スパン</h3>
<p>リンクや画像ではなく、直後に属性が続く角括弧内のテキストは、一般的なスパンとして扱われます。</p>
<div class="example">
<div class="djot">
<pre><code>It can be helpful to [read the manual]{.big .red}.</code></pre>
</div>
<div class="html">
<pre><code><p>It can be helpful to <span class="big red">read the manual</span>.</p>
</code></pre>
</div>
</div>
</section>
<section id="inline-attributes" class="level3">
<h3>インライン属性</h3>
<p>属性は中括弧内に配置され、属性を付加したいインライン要素の <em>直後</em> に置く必要があります（空白は入れません）。</p>
<p>中括弧内では、次の構文を使用できます:</p>
<ul>
<li> <code>.foo</code> は <code>foo</code> クラスとして指定します。この方法で複数のクラスを指定でき、それらは結合されます。</li>
<li> <code>#foo</code> は <code>foo</code> 識別子として指定します。要素は識別子を1つだけ持つことができます。複数の識別子が指定された場合は、最後の識別子が使用されます。</li>
<li> <code>key="value"</code> または、 <code>key=value</code> はkey-value属性を指定します。値がすべてASCII英数字で構成されている場合、 <code>_</code> 、 <code>:</code> 、 <code>-</code> で構成されている場合、引用符は必要ありません。バックスラッシュエスケープは引用符で囲まれた値の内部で使用できます。</li>
<li> <code>%</code> コメントが始まり、次の属性 <code>%</code> または属性の終わり（<code>}</code>）で終わります。</li>
</ul>
<p>属性指定子には改行が含まれる場合があります。</p>
<p>例:</p>
<div class="example">
<div class="djot">
<pre><code>An attribute on _emphasized text_{#foo
.bar .baz key="my value"}</code></pre>
</div>
<div class="html">
<pre><code><p>An attribute on <em class="bar baz" id="foo" key="my value">emphasized text</em></p>
</code></pre>
</div>
</div>
<p>属性指定子は「stacked」（積み重ねること）ができ、その場合は結合されます。したがって、</p>
<div class="example">
<div class="djot">
<pre><code>avant{lang=fr}{.blue}</code></pre>
</div>
<div class="html">
<pre><code><p><span class="blue" lang="fr">avant</span></p>
</code></pre>
</div>
</div>
<p>は、以下と同じです</p>
<div class="example">
<div class="djot">
<pre><code>avant{lang=fr .blue}</code></pre>
</div>
<div class="html">
<pre><code><p><span class="blue" lang="fr">avant</span></p>
</code></pre>
</div>
</div>
</section>
</section>
<section id="block-syntax" class="level2">
<h2>ブロック構文</h2>
<p>commonmarkと同様に、ブロック構造はインライン解析の前に識別でき、インライン構造よりも優先されます。</p>
<p>実際、ブロックはバックトラックなしで行ごとに解析できます。行がブロックレベルの構造に与える影響は、将来の行に依存することはありません。</p>
<p>インデントは、リスト項目または脚注のネストの場合にのみ重要です。</p>
<p>ブロックレベルの項目は空白行で区切る必要があります。2つのブロックレベル要素が隣接する場合があります。たとえば、水平線またはフェンスで囲まれたコードブロックの直後に段落が続くことがあります。実際、行ごとに解析できる可能性があるため、ブロックレベル要素の後に空白行を入れる必要はありません。ただし、読みやすさを考慮して、ブロックレベルの要素は <em>常に</em> 空行で区切ることをお勧めします。段落は他のブロックレベルの要素によって中断されることはなく、常に空行（または文書またはそれを含む要素の終わり）で終了する必要があります。</p>
<section id="paragraph" class="level3">
<h3>段落</h3>
<p>段落は、他のブロックレベル要素の1つであるための条件を満たさない、一連の非空白行です。テキストコンテンツは、一連のインライン要素として解析されます。改行はソフト改行として扱われ、書式設定された出力では空白と同様に解釈されます。段落は空白行または文書の終わりで終わります。</p>
</section>
<section id="heading" class="level3">
<h3>見出し</h3>
<p>見出しは1つ以上の <code>#</code> 文字シーケンスで始まり、その後に空白が続きます。 <code>#</code> 文字の数によって見出しレベルは定義されます。次のテキストはインラインコンテンツとして解析されます。</p>
<div class="example">
<div class="djot">
<pre><code>## A level _two_ heading!</code></pre>
</div>
<div class="html">
<pre><code><section id="A-level-two-heading">
<h2>A level <em>two</em> heading!</h2>
</section>
</code></pre>
</div>
</div>
<p>
見出しテキストは後続の行にまたがる場合があり、その前に同じ数の <code>#</code> 文字が続く場合もあります（ただし、省略することもできます）。</p>
<p>見出しは、空行（または文書またはそれを囲んでいるコンテナの終わり）に達すると終了します。</p>
<div class="example">
<div class="djot">
<pre><code># A heading that
# takes up
# three lines
A paragraph, finally</code></pre>
</div>
<div class="html">
<pre><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>
<div class="example">
<div class="djot">
<pre><code># A heading that
takes up
three lines
A paragraph, finally.</code></pre>
</div>
<div class="html">
<pre><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>
</section>
<section id="block-quote" class="level3">
<h3>引用ブロック（Block quote）</h3>
<p>引用ブロックは、各行が <code>></code> で始まり、その後に空白または行末が続く一連の行です。引用ブロック内のコンテンツ（最初の <code>></code> を除く）は、ブロックレベルのコンテンツとして解析されます。</p>
<div class="example">
<div class="djot">
<pre><code>> This is a block quote.
>
> 1. with a
> 2. list in it.</code></pre>
</div>
<div class="html">
<pre><code><blockquote>
<p>This is a block quote.</p>
<ol>
<li>
with a
</li>
<li>
list in it.
</li>
</ol>
</blockquote>
</code></pre>
</div>
</div>
<p>Markdownと同様に、段落はじまり行の前を除き、引用ブロック内の通常段落行から <code>></code> プレフィックスを省略することができます:</p>
<div class="example">
<div class="djot">
<pre><code>> This is a block
quote.</code></pre>
</div>
<div class="html">
<pre><code><blockquote>
<p>This is a block
quote.</p>
</blockquote>
</code></pre>
</div>
</div>
</section>
<section id="list-item" class="level3">
<h3>リスト項目</h3>
<p>リスト項目は、リストマーカー、空白（または改行）、リストマーカーに対してインデントされた1つ以上の行で構成されます。例えば:</p>
<div class="example">
<div class="djot">
<pre><code>1. This is a
list item.
> containing a block quote</code></pre>
</div>
<div class="html">
<pre><code><ol>
<li>
<p>This is a
list item.</p>
<blockquote>
<p>containing a block quote</p>
</blockquote>
</li>
</ol>
</code></pre>
</div>
</div>
<p>段落の開始行に続く段落行では、インデントが省略される場合があります:</p>
<div class="example">
<div class="djot">
<pre><code>1. This is a
list item.
Second paragraph under the
list item.</code></pre>
</div>
<div class="html">
<pre><code><ol>
<li>
<p>This is a
list item.</p>
<p>Second paragraph under the
list item.</p>
</li>
</ol>
</code></pre>
</div>
</div>
<p>次の基本的なタイプのリストマーカーを使用できます:</p>
<table>
<thead>
<tr class="header">
<th>マーカー</th>
<th>リストの種類</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td> <code>-</code> </td>
<td>bullet</td>
</tr>
<tr class="even">
<td> <code>+</code> </td>
<td>bullet</td>
</tr>
<tr class="odd">
<td> <code>*</code> </td>
<td>bullet</td>