Markdown (strict)の自分なりのまとめ

Markdown のソースが実際にどんな HTML ソースになるのか https://pandoc.org/try/ (以下pandoc)と http://daringfireball.net/projects/markdown/dingus (以下df)で色々試したことのまとめです。

Github などの追加要素のない strict バージョンの話です。また、他の実装とは異なる場合があるかもしれません。試した時のバージョンは pandoc 1.19.1 から 1.19.2 の間で、コマンドは pandoc --from markdown_strict --to html5 です。 (daringfireball の方はメモするのを忘れてました)

長いので手っ取り早く Markdown を知りたい場合には向かないと思います

参考：http://daringfireball.net/projects/markdown/syntax.php

Markdown について
段落と改行について
- 段落について
- 改行について
MarkdownでHTMLタグをそのまま書くときの注意点
特殊文字の自動エスケープ
見出しについて
引用について
リストについて
コードブロックについて
水平の罫線について
SPAN 系の要素
その他
- バックスラッシュでのエスケープ

Markdown について

web上のちょっとした文章を読み書き、編集し易くするためにあり、主にHTMLソースに変換されます。 HTMLタグをがっつりと書くためのものではないので、 Markdownの構文によって出力できるHTMLタグは少ないです (h1～h6, p, blockquote, ul, ol, li, pre, code, hr, a, em, strong, img かな)。これら以外のHTMLタグはそのまま書きます (Markdownが対応するタグでもそのまま書いて大丈夫です)。基本的にはそのままタグが出力されます。

リストに戻る

段落と改行について

段落について

まず、Markdown の特定の構文(strict では見出し、引用ブロック、リスト、コードブロック)を使わずに文章を書くと、 Markdown はその文章を段落と見なしてタグで囲んで出力します。

適当に文章を書けば、それを Markdown は段落と見なし
`<p>`タグで囲んで出力する。

出力結果：

<p>適当に文章を書けば、それを Markdown は段落と見なし p タグで囲んで出力する。</p>

空白行(空白やタブしかない行)で区切ると段落を分けることができます。逆に言うと空白行で区切られない限り、一つの段落とみなされるということです。

空白行(空白やタブしかない行)で区切ると

段落を分けることができる

出力結果：

<p>空白行(空白やタブしかない行)で区切ると</p>

<p>段落を分けることができる</p>

他に、Markdown の特定の構文でもタグで囲まれる場面がありますが、それは個々の構文の項目に書きます。

また、この通常の段落を書くときは空白(4つ以上)やタブでインデントしないようにします。インデントしてしまうとコードブロックとみなされ、 で囲まれずに<pre><code>で囲まれてしまうからです。

    インデントするとコードブロックと見なされる

出力結果：

<pre><code>インデントするとコードブロックと見なされる</code></pre>

リストに戻る

改行について

strict においては改行だけでは タグに変換されません。  タグを挿入したい時は をそのまま書くか、行末に空白を2つ以上入れてから改行します。

通常の改行は
変換されない。改行するにはbrタグの直接入力か、<br>空白を2つ以上いれて  
改行する。

出力結果

<p>通常の改行は 変換されない。改行するにはbrタグの直接入力か、<br>空白を2つ以上いれて<br />
改行する。</p>

リストに戻る

MarkdownでHTMLタグをそのまま書くときの注意点

Markdownではそのまま書いたHTMLタグは基本的にそのまま出力します。ただしブロックレベル要素のHTMLタグを書く場合は注意が必要になります。 Markdown では自動的に文章をタグで囲み出力する場面がよくあります。例えば上に書いた通常の段落は出力時にタグで囲まれます。そのためブロックレベル要素のタグがタグに囲まれてしまいます。

そのままブロックレベル要素のタグを書くと、<div>divタグがpタグの中に
入ってしまう</div>

出力結果

<p>そのままブロックレベル要素のタグを書くと、<div>divタグがpタグの中に 入ってしまう</div></p>

このような事態を避けるために、ブロックレベル要素を書くときはタグを空行で区切り、また、開始タグと終了タグをインデントしないようにします。

ブロックレベル要素のHTMLタグを書く場合は空行で区切る

<div>
    開始タグと終了タグはインデントしないようにする
</div>

出力結果

<p>ブロックレベル要素のHTMLタグを書く場合は空行で区切る</p>
<div>
    開始タグと終了タグはインデントしないようにする
</div>

もし空行で区切らないと段落の一部とみなされて タグの中にブロックレベル要素が挿入されてしまいます。

空行で区切らない場合
<div>
    divタグがpタグの中に入ってしまう
</div>

出力結果

<p>空行で区切らない場合 <div> divタグがpタグの中に入ってしまう </div></p>

また開始(終了)タグがインデントされているとコードブロックと見なされてしまい、 <pre><code>に包まれてしまいます(不等号(<,>)の参照化も行われます)。

開始タグと終了タグをインデントした場合

    <div>
        コードブロックと見なされる
    </div>

出力結果

<p>開始タグと終了タグをインデントした場合</p>
<pre><code>&lt;div&gt;
    コードブロックと見なされる
&lt;/div&gt;</code></pre>

一方、インラインレベル要素はタグの中にあってもよいので書く際に空行で区切る必要は無いです。

インラインレベル要素は<span>空行で区切る必要はない。</span>

<span>別に空行で区切ってもよい</span>が、その場合は段落が新しくなる

出力結果

<p>インラインレベル要素は<span>空行で区切る必要はない。</span></p>
<p><span>別に空行で区切ってもよい</span>が、その場合は段落が新しくなる</p>

※どの要素がインライン要素でどの要素がブロックレベル要素かの詳細は結局よくわかりませんでした。 HTML4 のそれをイメージして書けば大体それに沿います。

上のようにブロックレベル要素のタグをきちんと書いた場合、 Markdown はそれがブロックレベル要素であると認識します。認識されたブロックレベル要素のタグ内では Markdown の構文は効かなくなります。インラインレベル要素のタグの中では効きます。

ブロックレベル要素のタグの中は

<div>
    Marckdown の構文が*効かない*。
</div>

が、<span>インラインレベルでは*効く*。</span>

出力結果

<p>ブロックレベル要素のタグの中は</p>
<div>
    Marckdown の構文が*効かない*。
</div>
<p>が、<span>インラインレベルでは<em>効く</em>。</span></p>

また、おそらくインラインレベル要素のタグはただの文字列として扱われます。そのため、インラインレベル要素のタグの中で空行を挟むと段落が分かれてしまい出力結果がおかしくなるので空行を挟まないようにします。

<span>

段落がわかれて開始タグと終了タグが分離する

</span>

出力結果

<p><span></p>
<p>段落がわかれて開始タグと終了タグが分離する</p>
<p></span></p>

インラインレベル要素のタグは、後記する Markdown の引用、リスト、ヘッダの中でも書くことができます。

> 引用の中で<span>インラインレベル要素のタグ</span>は使える

* リストの中でも<span>インラインレベル要素のタグ</span>は使える

## ヘッダの中でも<span>インラインレベル要素のタグ</span>は使える

出力結果

<blockquote>
<p>引用の中で<span>インラインレベル要素のタグ</span>は使える</p>
</blockquote>
<ul>
<li>リストの中でも<span>インラインレベル要素のタグ</span>は使える</li>
</ul>
<h2>ヘッダの中でも<span>インラインレベル要素のタグ</span>は使える</h2>

リストに戻る

特殊文字の自動エスケープ

HTML で書く場合、 < や & の文字は < や & 等のように文字参照にする必要があります。 Markdown では自動的に文字参照に変換してくれます。しかも、 < や & 等の文字参照を&lt; や &amp; と変換せずにスルーして < や & のままにしておいてくれます。

<や&は文字参照に変換する。&lt;や&amp;等、文字参照の場合はスルーする

出力結果

<p>&lt;や&amp;は文字参照に変換する。&lt;や&amp;等、文字参照の場合はスルーする</p>

※>に関してはdfでは変換されずpandocでは変換しました。

また、Markdown はHTMLタグの直接入力をサポートするので  等のHTMLタグは  と変換せずにそのまま  と出力されます。

そのためか、<なんらかの文字列>をHTMLタグと認識し変換しない場合がありました (以下はpandocの例(dfでは変換された))。

Markdownは、<とか>などの文字を文字参照に変換する。

出力結果

<p>Markdownは、<とか>などの文字を文字参照に変換する。</p>

このような誤認識を防ぐため、 < などの文字は空白で区切る方が無難だと思います。

Markdownは、< とか > などの文字を文字参照に変換する。

出力結果

<p>Markdownは、&lt; とか &gt; などの文字を文字参照に変換する。</p>

コードスパンやコードブロックの中では上のように柔軟に対応せず常に文字参照に変換されます。つまり < や & 等が &lt; や &amp; と変換されます。

`コードスパンの中だと&lt;や<p>などは常に変換される</p>`

出力結果

<p><code>コードスパンの中だと&amp;lt;や&lt;p&gt;などは常に変換される&lt;/p&gt;</code></p>

リストに戻る

見出しについて

二通りあります。一つはイコール(=)かダッシュ(-)を見出しの下に置く方法です。

見出し1(H1)※=の数は任意
======
見出し2(H2)※-の数は任意
----------

出力結果

<h1>見出し1(H1)※=の数は任意</h1>
<h2>見出し2(H2)※-の数は任意</h2>

もう一つは # を見出しの行頭に並べる方法です。 # の数がそのまま H1 ～ H6 に対応します。 # は必ず行頭に置き、空白で字下げしないように注意して下さい。

#見出し1(H1)
##見出し2(H2)
###見出し3(H3)
####見出し4(H4)
#####見出し5(H5)
######見出し6(H6)
  #行頭に空白を挟むと見出しにならない

出力結果

<h1>見出し1(H1)</h1>
<h2>見出し2(H2)</h2>
<h3>見出し3(H3)</h3>
<h4>見出し4(H4)</h4>
<h5>見出し5(H5)</h5>
<h6>見出し6(H6)</h6>
<p>#行頭に空白を挟むと見出しにならない</p>

この方法は行頭の # の数のみで H1 ～ H6 が決定されます。行頭の # の直後の空白と、行末の空白と # は無視されるので、空白と # を行末に並べて見出しを飾ることができます。ただし、dfでは行末が空白であると # が無視されないので、行末は # になるように注意して下さい。

#見出し1(H1)　行頭の # の数で H1 ～ H6 が決まる
## 見出し2(H2)　行頭の # の直後に空白を置くことは任意
###     見出し3(H3)　行頭の # と直後の空白は無視される
####   見出し4(H4) 装飾的な意味で行末に # を並べてもよい ####
#####  見出し5(H5) 行末の # の数は任意でよい ################
###### 見出し6(H6) 行末が空白だと # が残る場合がある    #####

出力結果。dfだと h6 の # が残ってしまいます。

<h1>見出し1(H1)　行頭の # の数で H1 ～ H6 が決まる</h1>
<h2>見出し2(H2)　行頭の # の直後に空白を置くことは任意</h2>
<h3>見出し3(H3)　行頭の # と直後の空白は無視される</h3>
<h4>見出し4(H4) 装飾的な意味で行末に # を並べてもよい</h4>
<h5>見出し5(H5) 行末の # の数は任意でよい</h5>
<h6>見出し6(H6) 行末が空白だと # が残る場合がある</h6>

※# が残る場合(df)
<h6>見出し6(H6) 行末が空白だと # が残る場合がある    #####</h6>

リストに戻る

引用について

引用はメールでのそれと同じように>を行頭に置きます。行頭の>と空白1つ(任意)で引用と認識され、それ以降の文章が<blockquote>タグで囲まれて出力されます。引用に限りませんが、前後を空行で区切る方が無難です。

> 引用は行頭に > を置く。
> blockquoteとpタグで囲まれる

出力結果

<blockquote>
<p>引用は行頭に &gt; を置く。 blockquoteとpタグで囲まれる</p>
</blockquote>

行頭の>以降の文章は通常時(>が行頭に無い時)と同じように書けて、変換も同じようにされるようです。そのため上の例では>以降の通常文が段落と見なされてタグで囲まれ、それが<blockquote>タグで囲まれています。

行頭の>の前に空白を入れても引用と認識されますが、4つ以上入れるとコードブロックと見なされてしまうので注意して下さい。

  > 引用は > の前に空白があってもよい

    > しかし4つ以上だとコードブロックになる

出力結果

<blockquote>
<p>引用は &gt; の前に空白があってもよい</p>
</blockquote>
<pre><code>&gt; しかし4つ以上だとコードブロックになる</code></pre>

>以降の文章は通常時と同じように書けるので、ヘッダやリスト、コードブロック等の他の Markdown 要素も書けます。

> ### 引用の中の文章は
> 
> 1.   まるで`>`が無いかのように
> 2.   Markdown の文法を使って文章が書ける
> 
> コードブロックも書ける:
> 
>     console.log("全体がblockquoteで囲まれる");
> 
> > 引用も入れることができる。

出力結果：

<blockquote>
<h3>引用の中の文章は</h3>
<ol>
<li>まるで<code>&gt;</code>が無いかのように</li>
<li>Markdown の文法を使って文章が書ける</li>
</ol>
<p>コードブロックも書ける:</p>
<pre><code>console.log(&quot;全体がblockquoteで囲まれる&quot;);</code></pre>
<blockquote>
<p>引用も入れることができる。</p>
</blockquote>
</blockquote>

行頭の>と直後の空白が引用のための記号と見なされるためか、引用の中にコードブロックを書くときは、>の後の空白は5つ以上必要です。

毎行>を頭に付けるのが面倒臭い場合は、引用したい段落の先頭に>を付けるだけでその段落全体を引用にできます。

> 段落の先頭に > を付けるだけで、
その段落全体を引用することができる。  
引用の中で Markdown の文法を使うことのないシンプルな文章なら
この省略形式を使うのもあり。

出力結果：

<blockquote>
<p>段落の先頭に &gt; を付けるだけで、 その段落全体を引用することができる。<br />
引用の中で Markdown の文法を使うことのないシンプルな文章なら この省略形式を使うのもあり。</p>
</blockquote>

ただし、引用したい文章が複数の段落に分かれていたり、リストなどの Markdown の要素を引用の中で使いたい場合は、毎行>を付ける必要があります。

> 省略形式だと、複数の段落をまとめて blockquote で囲む方法が無いと思う。
段落を分けるには空行で区切る必要があるが、空行で区切った場合、

そこで引用も解除されてしまう。

> 毎行 > を付ける方式なら、空行で区切ったとしても、
> 
> 引用は途切れず、複数の段落を一つにまとめることができる。

出力結果：

<blockquote>
<p>省略形式だと、複数の段落をまとめて blockquote で囲む方法が無いと思う。 段落を分けるには空行で区切る必要があるが、空行で区切った場合、</p>
</blockquote>
<p>そこで引用も解除されてしまう。</p>
<blockquote>
<p>毎行 &gt; を付ける方式なら、空行で区切ったとしても、</p>
<p>引用は途切れず、複数の段落を一つにまとめることができる。</p>
</blockquote>

省略形式でもある程度の Markdown 文法を使うことはできますが、見づらくわかりにくくなってしまうので、省略形式を使うのは単純な段落のみに限った方が無難です。

リストに戻る

リストについて

順序無しリストと順序付きリストの2種類があります。

順序無しリストを書くには * 、 + 、 - を使います。記号は混在しても大丈夫です。順序無しリストは<ul>を使うリストを出力します。

* 順序無しリストは
+ 3つの記号が
- 混在してもよい

出力結果

<ul>
<li>順序無しリストは</li>
<li>3つの記号が</li>
<li>混在してもよい</li>
</ul>

順序付きリストを書くには数字に続いて.を置きます。順序付きリストは<ol>を使うリストを出力します。出力される<ol>では数字が指定されないので、順序付きリストに使う数字は実はどれでも大丈夫です。

8.   順序付きリストは
2.   数字の次に . を付ける
35.  数字はなんでもよい

出力結果

<ol>
<li>順序付きリストは</li>
<li>数字の次に . を付ける</li>
<li>数字はなんでもよい</li>
</ol>

HTMLの<ol>には現在、数字を指定する方法が非推奨なものしかありません。でも適当な数字を使うよりは、読みやすく手間もそれほどかからないので、

1. 1から連番で始めた方が
2. 適当な数字を使うより
3. 読みやすいしそれほど手間もかからない

と、1から連番で書いた方がいいと思います。

<dl>を使う定義リストは Markdown に用意されてないので、書きたいときはタグを直接書きましょう。

リストを出力させるための記号(*, +, -, 数字.)をマーカと呼ぶことにする。

リストを書くときの注意点として、まずは空行を開けます。そして、リストを出力させるための記号(*, +, -, 数字.。以下マーカと呼ぶ)の前には空白を3つまで入れることができます (4つ(1タブ)以上だとコードブロックと見なされます)。マーカの後には空白を入れます(空白を入れないとリストと認識されません)。入れる空白は3つまで(タブは入れない)が無難です (入れすぎるとpandocではリスト項目の中にコードブロックが入ります)。

   + マーカの前の空白は3つまで

---

    + マーカの前に空白4つ(または1タブ)以上入るとコードブロックになる

---

+マーカの直後に空白を入れないとリストと認識されない

---

   +    マーカの直後に入れる空白が多すぎるとリスト項目の中身が
        コードブロックになる実装がある

出力結果

<ul>
<li>マーカの前の空白は3つまで</li>
</ul>
<hr />
<pre><code>+ マーカの前に空白4つ(または1タブ)以上入るとコードブロックになる</code></pre>
<hr />
<p>+マーカの直後に空白を入れないとリストと認識されない</p>
<hr />
<ul>
<li><pre><code>マーカの直後に入れる空白が多すぎるとリスト項目の中身が
コードブロックになる実装がある</code></pre></li>
</ul>

リストの項目の文章が長い場合は見栄えを良くするために突き出しインデント(ぶら下げインデント)が使えます。

  * リスト項目の文章が長いなら
    突き出しインデントが見栄えがよくなる
  * 2行目以降の字下げの空白を無視する実装と
    ある程度しか無視しない実装があるが、HTML にとっては影響は少ない
  * インデントするのが面倒なら
使わなくてもよい。

出力結果

<ul>
<li>リスト項目の文章が長いなら 突き出しインデントが見栄えがよくなる</li>
<li>2行目以降の字下げの空白を無視する実装と ある程度しか無視しない実装があるが、HTML にとっては影響は少ない</li>
<li>インデントするのが面倒なら 使わなくてもよい。</li>
</ul>

リストの項目ごとに空行を挟むと項目の内容がタグで囲まれます。 1つの項目に複数の段落を入れたいときは、段落との間に空行を入れ、且つそのリスト項目から外れないようにするために次の段落の一行目をリスト項目に対応した量でインデントします (一行目以外もインデントしてよい)。

  * リスト項目の間に空行を入れると
    リスト項目の内容が p　タグで囲まれる

  * 1つの項目に複数の段落を入れたいときは

    段落との間に空行を入れ、且つ、段落の一行目を
リスト項目に対応した量(ここでは4以上7以下の空白(もしくは1タブ))で
インデントする。

出力結果

<ul>
<li><p>リスト項目の間に空行を入れると リスト項目の内容が p　タグで囲まれる</p></li>
<li><p>1つの項目に複数の段落を入れたいときは</p>
<p>段落との間に空行を入れ、且つ、段落の一行目を リスト項目に対応した量(ここでは4以上7以下の空白(もしくは1タブ))で インデントする。</p></li>
</ul>

ちなみに一度リスト項目に段落を入れてしまうと、以降のリスト項目もタグで囲まれてしまう恐れがあるので注意。あと、面倒でも一行目以降もインデントをした方が無難です。見た目が良くなるだけでなく、引用などをリストに入れる時に動作が安定します。

リストに戻る

リストの入れ子

元文書には書いてませんが、 Markdown のリストは入れ子にすることができます。

* 通常リスト1
    + 入れ子リスト1
    + 入れ子リスト2
        - 二重入れ子リスト1
        - 二重入れ子リスト2
    + 入れ子リスト3
* 通常リスト2
* 通常リスト3

出力結果(見やすくするため字下げをしました)：

<ul>
    <li>通常リスト1
    <ul>
        <li>入れ子リスト1</li>
        <li>入れ子リスト2
        <ul>
            <li>二重入れ子リスト1</li>
            <li>二重入れ子リスト2</li>
        </ul></li>
        <li>入れ子リスト3</li>
    </ul></li>
    <li>通常リスト2</li>
    <li>通常リスト3</li>
</ul>

リストを入れ子にする方法は元文書に書かれていないためか、必要なインデントの量や条件がdfとpandocで違っています (そもそも言及されていないのでリストの入れ子はサポート外？)。

2つの実装で想定通りに出力できそうな入れ子リストの書き方は、入れ子の深さに応じて空白を4つ(1タブ)ずつ増やすことです。マーカの種類を入れ子の深さに応じて揃える必要は無いのですが、見やすくなるので揃えた方がいいと思います。

深さに応じて空白を4つ増やす

* ルート(インデント量0)
    + 深さ1(インデント量空白4つ)
        - 深さ2(インデント量空白8つ)

ルートがインデントされていた場合も同様

  * ルート(インデント量空白2つ)
      + 深さ1(インデント量空白6つ)
          - 深さ2(インデント量空白10)

出力結果(見やすくするため字下げをしました)：

<p>深さに応じて空白を4つ増やす</p>
<ul>
    <li>ルート(インデント量0)
    <ul>
        <li>深さ1(インデント量空白4つ)
        <ul>
            <li>深さ2(インデント量空白8つ)</li>
        </ul></li>
    </ul></li>
</ul>
<p>ルートがインデントされていた場合も同様</p>
<ul>
    <li>ルート(インデント量空白2つ)
    <ul>
        <li>深さ1(インデント量空白6つ)
        <ul>
            <li>深さ2(インデント量空白10)</li>
        </ul></li>
    </ul></li>
</ul>

リスト項目に引用ブロックを入れたい場合、dfとpandocの両方で通用させるには、空行を開けて、空白4つかタブでインデントします。

  * リスト項目に引用ブロックを入れたい場合は、

    > 空行を開け(必須)、空白4つかタブでインデント(必須)して書く。

出力結果：

<ul>
<li><p>リスト項目に引用ブロックを入れたい場合は、</p>
<blockquote>
<p>空行を開け(必須)、空白4つかタブでインデント(必須)して書く。</p>
</blockquote></li>
</ul>

そして、例えリストの項目が引用で始まっていても、マーカの隣に > は置けず、空行を開けてのインデントを行わなければなりません (そうしないとdfでうまくいきません)。マーカの隣の空白を忘れないように注意して下さい。

  * 

    > 例え引用で始まるとしても `*` の横に `>` を置けない。
    > 空行を開け、空白4つかタブでインデントして書く。

出力結果：

<ul>
<li><blockquote>
<p>例え引用で始まるとしても <code>*</code> の横に <code>&gt;</code> を置けない。 空行を開け、空白4つかタブでインデントして書く。</p>
</blockquote></li>
</ul>

2行目以降のインデントと > は、引用する文章が単純な段落一つであれば必要ありませんが、それ以上のことをするのであれば必須だと思います。

  * 単純な段落一つであれば必要無いが、

    > 2行目以降もインデントして > を書いた方が良い。そうすれば
    > 
    > 段落も分けられる
    > 
    > ### 見出しも書ける
    > 
    >     コードブロックも書ける
    > 
    > > 引用も入れられる

出力結果：

<ul>
<li><p>単純な段落一つであれば必要無いが、</p>
<blockquote>
<p>2行目以降もインデントして &gt; を書いた方が良い。そうすれば</p>
<p>段落も分けられる</p>
<h3>見出しも書ける</h3>
<pre><code>コードブロックも書ける</code></pre>
<blockquote>
<p>引用も入れられる</p>
</blockquote>
</blockquote></li>
</ul>

空行を入れた場合、次の行がインデントをしていないとリストの終了と見られるので、インデントはそのリスト項目に所属していることを表すのに必要と思われます。

  * インデントしていない場合、もし空行を挟んでしまうと

リストから外れてしまう

  * インデントしていた場合、空行を挟んでしまっても、

    リストから外れない

出力結果：

<ul>
<li>インデントしていない場合、もし空行を挟んでしまうと</li>
</ul>
<p>リストから外れてしまう</p>
<ul>
<li><p>インデントしていた場合、空行を挟んでしまっても、</p>
<p>リストから外れない</p></li>
</ul>

リスト項目にコードブロックを入れたい場合は、空行を開けて2倍のインデント(空白8文字もしくはタブ2つ)を行います。 8文字より多くインデントしてしまうと超過分の空白がコードブロックに入ってしまうので注意。コードブロックも引用ブロックの時と同じように、先頭に置く場合でも空行を挟んでインデントしないとdfでうまく変換されません。

  * コードブロックを入れたい場合は空行を挟み、

        2倍インデント(8文字分 or タブ2つ)するとコードブロックになる

  *     マーカのある行でインデントしてもコードブロックにならない
        実装もあるので、

  * 

        先頭に置く場合でも空行を挟んでインデントする
        マーカ直後に空白を置くことを忘れない

出力結果：

<ul>
<li><p>コードブロックを入れたい場合は空行を挟み、</p>
<pre><code>2倍インデント(8文字分 or タブ2つ)するとコードブロックになる</code></pre></li>
<li><pre><code>マーカのある行でインデントしてもコードブロックにならない
実装もあるので、</code></pre></li>
<li><pre><code>先頭に置く場合でも空行を挟んでインデントする
マーカ直後に空白を置くことを忘れない</code></pre></li>
</ul>

入れ子のリストに引用ブロックやコードブロックを置くときは、インデントの量を入れ子の深さに応じて4つ(1タブ)ずつ増やします。

  * 

    > 深さ0の引用ブロック
    > (インデント量空白4つ)

  * 

        深さ0のコードブロック
        (インデント量空白8つ)

      + 

        > 深さ1の引用ブロック
        > (インデント量空白8つ)

      + 

            深さ1のコードブロック
            (インデント量空白12)

          - 

            > 深さ2の引用ブロック
            > (インデント量空白12)

          - 

                深さ2のコードブロック
                (インデント量空白16)

  * 入れ子の深さに応じて4つずつ増やす

出力結果(見やすくするため字下げをしました)：

<ul>
    <li><blockquote>
        <p>深さ0の引用ブロック (インデント量空白4つ)</p>
    </blockquote></li>
    <li><pre><code>深さ0のコードブロック
(インデント量空白8つ)</code></pre>
    <ul>
        <li><blockquote>
            <p>深さ1の引用ブロック (インデント量空白8つ)</p>
        </blockquote></li>
        <li><pre><code>深さ1のコードブロック
(インデント量空白12)</code></pre>
        <ul>
            <li><blockquote>
                <p>深さ2の引用ブロック (インデント量空白12)</p>
            </blockquote></li>
            <li><pre><code>深さ2のコードブロック
(インデント量空白16)</code></pre></li>
        </ul></li>
    </ul></li>
    <li>入れ子の深さに応じて4つずつ増やす</li>
</ul>

リストに戻る

リストの終了判定(推測)

リストは後続の要素がインデントされていると、その要素を直前のリスト項目の一部とみなすようです。 dfでは行頭に空白が一文字あるだけでその要素をリスト項目の一部と見なしてしまうので注意。

  * リスト

 段落のつもりが、行頭の空白のために
リストの一部と見なす実装がある

出力結果(pandoc)：

<ul>
<li>リスト</li>
</ul>
<p>段落のつもりが、行頭の空白のために リストの一部と見なす実装がある</p>

出力結果(df)：

<ul>
<li><p>リスト</p>

<p>段落のつもりが、行頭の空白のために
リストの一部と見なす実装がある</p></li>
</ul>

特に、リストの直後にコードブロックを置く場合は注意です。

  * リストの次にコードブロックを入れるつもりが、

    alert("この行はコードブロックにならずリスト所属の段落となる");

出力結果：

<ul>
<li><p>リストの次にコードブロックを入れるつもりが、</p>
<p>alert(&quot;この行はコードブロックにならずリスト所属の段落となる&quot;);</p></li>
</ul>

この場合、 Github 等では ``` で囲む方式のコードブロックを使えばよいのですが、 strict ではこの方式がありません。リストを終了させるにはコードブロックとの間にインデントされてない何かしらの要素を挟みます。何らかの文章を挟むか、HTML以外を出力しないのなら空のコメントを挟むのが無難だと思います。

  * リストの次にコードブロックを入れるつもり

<!-- -->

    alert("間に何かを挟めばコードブロックになる");

出力結果：

<ul>
<li>リストの次にコードブロックを入れるつもり</li>
</ul>
<!-- -->
<pre><code>alert(&quot;間に何かを挟めばコードブロックになる&quot;);</code></pre>

リストに戻る

リストのお勧めの書き方

リストのマーカの字下げの量は空白2つが見栄えが良くわかりやすいのでお勧めです。後は、後続の要素をリストに所属させるためには4つの空白(1タブ)でインデントすること、リストの入れ子が深くなるごとにインデント量が4つ(1タブ)増えることに注意して書くといい感じです。

  * マーカ前に空白2つで
    2行目以降の文章と揃う

        コードブロック(4+4)

    > 引用(4)

      + マーカ前の空白6つ(4+2)
        入れ子にするたび4つ増やす

            コードブロック(4+4+4)

        > 引用(4+4)

          - マーカ前の空白10(4+4+2)

                コードブロック(4+4+4+4)

            > 引用(4+4+4)

出力結果(見やすくするため字下げをしました)：

<ul>
    <li><p>マーカ前に空白2つで 2行目以降の文章と揃う</p>
    <pre><code>コードブロック(4+4)</code></pre>
    <blockquote>
    <p>引用(4)</p>
    </blockquote>
    <ul>
        <li><p>マーカ前の空白6つ(4+2) 入れ子にするたび4つ増やす</p>
        <pre><code>コードブロック(4+4+4)</code></pre>
        <blockquote>
        <p>引用(4+4)</p>
        </blockquote>
        <ul>
            <li><p>マーカ前の空白10(4+4+2)</p>
            <pre><code>コードブロック(4+4+4+4)</code></pre>
            <blockquote>
            <p>引用(4+4+4)</p>
            </blockquote></li>
        </ul></li>
    </ul></li>
</ul>

リストに戻る

順序付きリストの暴発

以下のように順序付きリストが暴発する時があります。

2016. リオオリンピック(数字→ピリオド→空白と続くと暴発する)

出力結果：

<ol>
<li>リオオリンピック(数字→ピリオド→空白と続くと暴発する)</li>
</ol>

そんな時はピリオドをバックスラッシュでエスケープします

2016\. リオオリンピック(数字→ピリオド→空白にならなければよい)

出力結果：

<p>2016. リオオリンピック(数字→ピリオド→空白にならなければよい)</p>

リストに戻る

コードブロックについて

コードブロックはプログラムのソースコードや HTML のソースなどを表示するのに使います。 strict でコードブロックを書くには、全ての行に少なくとも4つの空白文字か1つのタブでインデントします。コードブロックに書いた文字列は<pre>と<code>タグに囲まれて出力されます。

    コードブロックをかくには
    空行を挟み4つの空白文字か1つのタブでインデントする。

出力結果：

<pre><code>コードブロックをかくには
空行を挟み4つの空白文字か1つのタブでインデントする。</code></pre>

コードブロックに必要なインデントは出力時に削除されますが、削除されるのは空白4文字(1タブ)分だけで、それ以上の空白は残されます。

    空白4文字(1タブ)以上の空白は(空白4文字でインデント)
       削除されないので注意(空白7文字でインデント)

出力結果：

<pre><code>空白4文字(1タブ)以上の空白は(空白4文字でインデント)
   削除されないので注意(空白7文字でインデント)</code></pre>

コードブロックはインデントされていない文章が出てくるまで (もしくは記事の最後まで)続きます。そのため、複数のコードブロックを続けて書く場合は注意が必要です。リスト→コードブロックと書く時と同じで、インデントされていない何らかの要素を挟まないと一つのコードブロックとみなされてしまいます。

空行だけではコードブロックは終了しない

    コードブロック1


    コードブロック2

複数のコードブロックを連続で書く場合は
インデントされていない何らかの要素を挟む

    コードブロック1

<!-- -->

    コードブロック2

出力結果：

<p>空行だけではコードブロックは終了しない</p>
<pre><code>コードブロック1


コードブロック2</code></pre>
<p>複数のコードブロックを連続で書く場合は インデントされていない何らかの要素を挟む</p>
<pre><code>コードブロック1</code></pre>
<!-- -->
<pre><code>コードブロック2</code></pre>

コードブロック内の文字はその文字通りに解釈されるため、 Markdown の構文も効かなくなります。そのため、ソースコード(Markdownも含む)はコードブロックにそのまま書くことができます。

    ## Markdown のソース表示

    コードブロックで*そのまま*書けばよい

出力結果：

<pre><code>## Markdown のソース表示

コードブロックで*そのまま*書けばよい</code></pre>

また、コードブロック内の & と < と > は自動でHTMLの参照に変換されるので、 HTML ソースでもコードブロックにそのまま書くことができる。

    <p>HTML では &amp; や &lt; は特別な意味を持つので、
    これらの文字がブラウザで文字通りに表示されるようにするには、
     &amp;amp; や &amp;lt; 等と書く必要がある。</p>

出力結果：

<pre><code>&lt;p&gt;HTML では &amp;amp; や &amp;lt; は特別な意味を持つので、
これらの文字がブラウザで文字通りに表示されるようにするには、
 &amp;amp;amp; や &amp;amp;lt; 等と書く必要がある。&lt;/p&gt;</code></pre>

リストに戻る

水平の罫線について

水平線は * か - か _ を同一行に3つ以上書きます。 <hr> タグに変換されて出力されます。

***

----

_____

出力結果：

<hr />
<hr />
<hr />

色々試してみたところ、pandocとdfで同じように書くための注意点は以下のような感じです。

空行を挟む(挟まないとdfで変換されない)
インデントは空白3文字まで(4文字以上はコードブロック)
*、-、_ は混在させない
同じ行に空白以外の文字を入れない
最初に3つ連続で書くこと。それ以降は記号の書く個数は自由で、連続2つまでの空白を自由に含めてよい

例：

インデント3文字：

   ---

インデント4文字：

    ---

`*`、`-`、`_` は混在しない

*** --- ___ 

同じ行に空白以外の文字を入れない

--- あ

最初に3つ連続で書くこと。それ以降は記号の書く個数は自由で、
連続2つまでの空白を自由に含めてよい

--- -  --  ---  --  - ---

出力結果：

<p>インデント3文字：</p>
<hr />
<p>インデント4文字：</p>
<pre><code>---</code></pre>
<p><code>*</code>、<code>-</code>、<code>_</code> は混在しない</p>
<p>*** --- ___</p>
<p>同じ行に空白以外の文字を入れない</p>
<p>--- あ</p>
<p>最初に3つ連続で書くこと。それ以降は記号の書く個数は自由で、 連続2つまでの空白を自由に含めてよい</p>
<hr />

リストに戻る

SPAN 系の要素

SPAN 系の要素とは、HTML4におけるインライン要素にあたるものと思われます。

リンク

HTML の<a>タグを出力させる構文です。手軽な自動リンクや、インライン形式と参照形式などの方法があります。

自動リンク

URLやメールアドレスを不等号(<,>)で囲むとリンクにしてくれます。

不等号で囲むと<http://www.example.co.jp/>リンクになる  
メールアドレスも<name@example.co.jp>リンクになる

出力結果(pandoc)：

<p>不等号で囲むと<a href="http://www.example.co.jp/" class="uri">http://www.example.co.jp/</a>リンクになる<br />
メールアドレスも<a href="mailto:name@example.co.jp">name@example.co.jp</a>リンクになる</p>

pandocではclass属性が付き、dfでは簡単なアドレス収集bot対策が施されます。この形式は手軽ですが、リンクテキストやtitle属性を指定したい場合は他の2つの方法を使います。

リストに戻る

インライン形式

インライン形式でのリンクは以下のように書きます。

[リンクテキスト](http://www.google.co.jp/ "title属性値")

[リンクテキスト](http://www.google.co.jp/)

出力結果：

<p><a href="http://www.google.co.jp/" title="title属性値">リンクテキスト</a></p>
<p><a href="http://www.google.co.jp/">リンクテキスト</a></p>

インラインではまず角括弧([])でリンクテキストを囲み、その直後に空白を挟まずに丸括弧（()）を置きます。丸括弧の中には href 属性値と、任意で title 属性値を置きます。 href 属性値と title 属性値の間に空白を挟みます (挟まないとpandocでうまく変換されません)。 title 属性値は ' か " で囲みます。

href 属性値と title 属性値を包む空白は無視されます。リンクテキストの両端の空白は、pandocは無視してdfは無視しないので入れない方が無難です。

[   リンクテキスト   ](   http://www.google.co.jp/   )

出力結果(pandoc)：

<p><a href="http://www.google.co.jp/">リンクテキスト</a></p>

出力結果(df)：

<p><a href="http://www.google.co.jp/">   リンクテキスト   </a></p>

リストに戻る

参照形式

参照形式は文書のどこかに href 属性値と title 属性値(任意)を定義して id を振っておき、リンクを貼る段階で href 属性値と title 属性値をその割り振っておいた id で参照する形式です。

まず、href 属性値と title 属性値を定義して、id を振ります。定義位置は文書のどこでも大丈夫です。定義はリンクの生成処理にのみ使われ、HTMLに出力されません。

[id1]: href属性値1
[id2]: href属性値2 "title属性値2"
[id3]: href属性値3 (title属性値3)
[id4]: <href属性値4>
[id5]: <href属性値5> "title属性値5"

出力結果：

※正しく定義すると何も出力されない

定義する際の注意点は以下のような感じです。

同じ行に他の記述を入れないようにする
[]の前に空白を3つまで入れられる(4つ以上はコードブロック)
[]と:の間に空白を挟まない
:の直後の空白は任意
href属性値とtitle属性値の間の空白は必須
href属性値は何も囲まない、もしくは<>で囲む
title属性値は"か()で囲む。'はdfでうまくいかないので避ける

id を振った後、リンクテキストとidを指定してリンクを貼ります。すると、指定したidからhref属性値とtitle属性値が参照されリンクに設定されます。以下のように角括弧を2組使います。

これは[参照形式のリンク][id1]です。  
角括弧の間に[空白] [id2]をいれてもよい。  
指定したidから[href属性値][id3]と、  
[title属性値][id4]が参照され、  
指定した[リンクテキスト][id5]のリンクが作成される。  

[id1]: href属性値1
[id2]: href属性値2 "title属性値2"
[id3]: href属性値3 (title属性値3)
[id4]: <href属性値4>
[id5]: <href属性値5> "title属性値5"

出力結果：

<p>これは<a href="href属性値1">参照形式のリンク</a>です。<br />
角括弧の間に<a href="href属性値2" title="title属性値2">空白</a>をいれてもよい。<br />
指定したidから<a href="href属性値3" title="title属性値3">href属性値</a>と、<br />
<a href="href属性値4">title属性値</a>が参照され、<br />
指定した<a href="href属性値5" title="title属性値5">リンクテキスト</a>のリンクが作成される。</p>

最初の[]にリンクテキスト、次の[]にidを指定します。 []の間に空白をいれることができます。

定義に同じidを複数振ってしまった場合、同一idのうち文書の一番最後にある定義が使われます。

これは[参照形式のリンク][id1]です。

[id1]: href属性値1
[id1]: href属性値2 "title属性値2"
[id1]: href属性値3 (title属性値3)
[id1]: <href属性値4>
[id1]: <href属性値5> "title属性値5"

出力結果：

<p>これは<a href="href属性値5" title="title属性値5">参照形式のリンク</a>です。</p>

idには文字、数字、空白、句読点が使えます。

これは[参照形式のリンク][あ i,d.1。]です。

[あ i,d.1。]: href属性値 "title属性値"

出力結果：

<p>これは<a href="href属性値" title="title属性値">参照形式のリンク</a>です。</p>

idは大文字小文字を区別しません。

これは[参照形式のリンク][abcdefghi]です。

[aBcDeFgHi]: href属性値 "title属性値"

出力結果：

<p>これは<a href="href属性値" title="title属性値">参照形式のリンク</a>です。</p>

idの両端にある空白をpandocは無視しdfは無視しないので、 []とidの両端との間には空白を入れない方が無難です。

これは[参照形式のリンク][id]です。

[  id  ]: href属性値 "title属性値"

出力結果(pandoc)：

<p>これは<a href="href属性値" title="title属性値">参照形式のリンク</a>です。</p>

出力結果(df)：

<p>これは[参照形式のリンク][id]です。</p>

定義でhref属性値とtitle属性値の間に改行を一つだけ挟めます。その後空白で字下げもできます。これは、 href属性値とtitle属性値が長くて同一行に置くと見ずらい場合に便利です。

これは[参照形式のリンク][id]です。

[id]: とてもながーーーーーーーーーーーーいhref属性値
      "改行、字下げをして見やすくなったtitle属性値"

出力結果：

<p>これは<a href="とてもながーーーーーーーーーーーーいhref属性値" title="改行、字下げをして見やすくなったtitle属性値">参照形式のリンク</a>です。</p>

参照形式でリンクを貼る時、リンクテキストをidと同じにすれば、 idを省略して書くことができます。[]も省略できます。

不明な点は[google][]で調べる。
不明な点は[yahoo]で調べる。

[google]: googleのurl "Google"
[yahoo]: yahooのurl "Yahoo"

出力結果：

<p>不明な点は<a href="googleのurl" title="Google">google</a>で調べる。<br />
不明な点は<a href="yahooのurl" title="Yahoo">yahoo</a>で調べる。</p>

リストに戻る

強調

文字列を強調するには*か_で囲みます。記号は混在できません。一つで囲めば 、二つで囲めばタグで出力されます。三個で囲むとで出力されます。四つで囲むとうまくいかなかったのでやらない方がいいです。

強調は*アスタリスクかアンダースコアで囲む*

_開始と終了は同じ記号にしないと強調されない*

_一つで囲むとem_  
**二つで囲むとstrong**  
***3つで囲むとstrong emで囲まれた***   
****4つだと実装により異なるがいずれにしろうまくいかない****

出力結果：

<p>強調は<em>アスタリスクかアンダースコアで囲む</em></p>
<p>_開始と終了は同じ記号にしないと強調されない*</p>
<p><em>一つで囲むとem</em><br />
<strong>二つで囲むとstrong</strong><br />
<strong><em>3つで囲むとstrong emで囲まれた</em></strong><br />
****4つだと実装により異なるがいずれにしろうまくいかない****</p>

また、*や_と強調する文字列との間に空白が挟まると強調されないので注意して下さい。

強調したい文字列の前後に空白が挟まると* 強調されない *ので注意。

出力結果：

<p>強調したい文字列の前後に空白が挟まると* 強調されない *ので注意。</p>

*や_で囲んでもやタグに変換させずに *ほにゃらら*のようにそのまま出力させたい場合は\でエスケープします。

\で\*エスケープ\*すれば強調されずにそのまま出力される

出力結果：

<p>\で*エスケープ*すれば強調されずにそのまま出力される</p>

リストに戻る

インラインでのコード表示

文章の中でコードを表示させたいときには、コードをバッククォート(`)で囲みます。コードブロックでは<pre><code>タグが出力されますが、インラインでは<code>タグが出力されます。

文章の中で`console.log()`のようにコードを書く場合は
コードをバッククォート(\`)で囲む

出力結果：

<p>文章の中で<code>console.log()</code>のようにコードを書く場合は コードをバッククォート(`)で囲む</p>

コードブロックと同様に、アンパサンド(&)と不等号(<、>)は参照にエンコードされます。

`<span>`はインライン要素
`&#160;`はノーブレークスペース`&nbsp;`の数値文字参照である

出力結果：

<p><code>&lt;span&gt;</code>はインライン要素 <code>&amp;#160;</code>はノーブレークスペース<code>&amp;nbsp;</code>の数値文字参照である</p>

他に"もpandocではエンコードされました。

コードにバッククォート(`)が含まれる場合は連続した複数のバッククォートで囲みます。

コードに``バッククォート(`)``が含まれる場合は
連続した複数のバッククォートで囲む。``

出力結果：

<p>コードに<code>バッククォート(`)</code>が含まれる場合は 連続した複数のバッククォートで囲む。</p>

注意点として、コードを囲むバッククォートの数は、コード内のバッククォートの連続数のいずれとも一致しないようにします。例えば、以下のように書くとうまくいきません。

例えば、``console.log("``");``と書いたとする。

出力結果：

<p>例えば、<code>console.log(&quot;</code>&quot;);``と書いたとする。</p>

上の例のように、コードを囲むバッククォートの数(2個)がコードに含まれるバッククォートの連続数(2個)と一致していると、その位置でコードの終了と見なされてしまいます。結果、 console.log("までが<code>で囲まれてしまい、残りが平文となってしまいます。

これを避けるには、バッククォートの数が一致しないようにすればよいので、囲むバッククォートの数を2個以外(例えば1個)にします。

例えば、`console.log("``");`と書いたとする。

出力結果：

<p>例えば、<code>console.log(&quot;``&quot;);</code>と書いたとする。</p>

コードブロックと違って、バッククォートで囲んだコードの前後の空白は無視されます。

例えば、`      console.log("hi");   `としても前後の空白は無視される。

出力結果：

<p>例えば、<code>console.log(&quot;hi&quot;);</code>としても前後の空白は無視される。</p>

この性質を使えば、コードの末端にバッククォートがある場合でも、前後に空白を挟むことで正しく出力させることができます。例えば、`console.log(a)`と表示させたい場合、

```console.log(a)```←NG
`` `console.log(a)` ``←OK

出力結果：

<p><code>console.log(a)</code>←NG<br />
<code>`console.log(a)`</code>←OK</p>

上のように、空白を挟まずに囲んでしまうとインラインコードの構文の一部と見なされてしまい、結果console.log(a)と出力されてしまうので、空白を開けて区切りましょう。

ちなみに、改行を伴うコードを書く場合はインラインコードではなくコードブロックで書くようにしましょう。用途に沿うし、pandocではインラインコードの中の改行がそのまま出力されません。

リストに戻る

画像について

リンクと似たような構文で、<img>タグを出力させることができます。ただし、width属性とheight属性を指定する構文が無いのでそれらを指定したい場合は<img>タグをそのまま書くことになります。

画像もリンクと同じようにインライン形式と参照形式の2つの方法があります。

インライン形式

画像のインライン形式は以下のように書きます。

![alt属性値](src属性値)

![alt属性値](src属性値 "title属性値")

出力結果：

<p><img src="src属性値" alt="alt属性値" /></p>
<p><img src="src属性値" title="title属性値" alt="alt属性値" /></p>

これはリンクのインライン形式の前にエクスクラメーションマーク(!)を付けただけっぽいです。角括弧([])の中にalt属性値を書き、丸括弧の中にsrc属性値とtitle属性値(任意)を置きます。書く際の注意点は以下のような感じです。

エクスクラメーションマーク(!)と角括弧([])の間に空白を挟まない
角括弧の中でalt属性値の両端に空白を入れない (dfだと空白を無視しない)。
角括弧と丸括弧(())の間に空白を挟まない (pandocは一つ、dfは二つ以上でうまくいかなくなる)
src属性値とtitle属性値の間に空白を挟む (挟まないとpandocでうまくいかない)
title属性値はダブルクォート(")かシングルクォート(')で囲む

リストに戻る

参照形式

画像の参照形式もリンクのそれと同様に、文書のどこかでsrc属性値とtitle属性値(任意)を定義してidを振っておきます。

[id1]: src属性値1
[id2]: src属性値2 "title属性値2"
[id3]: src属性値3 (title属性値3)
[id4]: <src属性値4>
[id5]: <src属性値5> "title属性値5"
[id6]: <src属性値6> (title属性値6)

出力結果：

※正しく定義すると何も出力されない

定義を書く際の注意点としては以下のような感じです。だいたいリンクのそれと同じ感じです。

同じ行に他の記述を入れないようにする
[]の前に空白を3つまで入れられる(4つ以上はコードブロック)
[]と:の間に空白を挟まない
:の直後の空白は任意
src属性値とtitle属性値の間の空白は必須
src属性値は何も囲まない、もしくは<>で囲む
title属性値は"か()で囲む。'はdfでうまくいかない

定義がどこかに書いてあれば、alt属性値とidを指定して画像を貼る事ができます。これも、頭にエクスクラメーションマーク(!)を付ける以外はリンクのそれと同じみたいです。 !と[]の間に空白を入れないように注意して下さい。

これは![参照形式の画像][id1]です。  
角括弧の間に![空白] [id2]をいれてもよい。  
指定したidから![src属性値][id3]と、  
![title属性値][id4]が参照され、  
指定した![alt属性値][id5]の画像が出力される。  
![alt属性値6][id6]

[id1]: src属性値1
[id2]: src属性値2 "title属性値2"
[id3]: src属性値3 (title属性値3)
[id4]: <src属性値4>
[id5]: <src属性値5> "title属性値5"
[id6]: <src属性値6> (title属性値6)

出力結果：

<p>これは<img src="src属性値1" alt="参照形式の画像" />です。<br />
角括弧の間に<img src="src属性値2" title="title属性値2" alt="空白" />をいれてもよい。<br />
指定したidから<img src="src属性値3" title="title属性値3" alt="src属性値" />と、<br />
<img src="src属性値4" alt="title属性値" />が参照され、<br />
指定した<img src="src属性値5" title="title属性値5" alt="alt属性値" />の画像が出力される。<br />
<img src="src属性値6" title="title属性値6" alt="alt属性値6" /></p>

他の注意点として、リンクと同じようなものがあります。

idには文字、数字、空白、句読点が使える。
idは大文字小文字を区別しない。
[]の中でidの両端に空白を入れない方がよい。

定義でsrc属性値とtitle属性値の間に改行を挟めるのもリンクと同じです。

これは![参照形式の画像][id]です。

[id]: とてもながーーーーーーーーーーーーいsrc属性値
      "改行、字下げをして見やすくなったtitle属性値"

出力結果：

<p>これは<img src="とてもながーーーーーーーーーーーーいsrc属性値" title="改行、字下げをして見やすくなったtitle属性値" alt="参照形式の画像" />です。</p>

リンクの時と同様に、参照形式で画像を書く時は、 alt属性値とidが同じならidを省略して書けます。

成功すると→![成功画像][]  
失敗すると→![失敗画像]

[成功画像]: 成功画像のurl "成功"
[失敗画像]: 失敗画像のurl "失敗"

出力結果：

<p>成功すると→<img src="成功画像のurl" title="成功" alt="成功画像" /><br />
失敗すると→<img src="失敗画像のurl" title="失敗" alt="失敗画像" /></p>

リストに戻る

その他

バックスラッシュでのエスケープ

Markdown構文で特殊な意味を持つ記号をそのまま出力したい場合はバックスラッシュ(\)でエスケープします。

\#\#\# 見出し と書くとMarkdownでは見出し(この場合はh3タグ)に変換される

### 見出し と書くとMarkdownでは見出し(この場合はh3タグ)に変換される

出力結果：

<p>### 見出し と書くとMarkdownでは見出し(この場合はh3タグ)に変換される</p>
<h3>見出し と書くとMarkdownでは見出し(この場合はh3タグ)に変換される</h3>

バックスラッシュでエスケープできる記号は以下のようなものがあります。実装によってはこれ以外の記号もエスケープできるものがあります。

記号	読み方	Markdownでの用途
`\`	バックスラッシュ	エスケープするときに使う
`	バッククォート	インラインでのコード表示に使う
`*`	アスタリスク	順序無しリスト、罫線、強調で使う
`_`	アンダースコア	罫線と強調に使う
`{}`	波括弧	特に使われていない
`[]`	角括弧	リンクと画像に使う
`()`	丸括弧	リンクと画像に使う
`>`	大なり	引用で使う
`#`	ハッシュマーク(シャープ)	見出しで使う
`+`	プラス記号	順序無しリストで使う
`-`	マイナス記号	見出し、順序無しリスト、罫線で使う
`.`	ドット	番号付きリストで使う
`!`	エクスクラメーションマーク	画像に使う

リストに戻る

私的なjQuery他

jQuery他について学んだことのまとめとかを記録する。

Markdown (strict)の自分なりのまとめ

Markdown について

段落と改行について

段落について

改行について

MarkdownでHTMLタグをそのまま書くときの注意点

特殊文字の自動エスケープ

見出しについて

引用について

リストについて

リストの入れ子

リストの終了判定(推測)

リストのお勧めの書き方

順序付きリストの暴発

コードブロックについて

水平の罫線について

SPAN 系の要素

リンク

自動リンク

インライン形式

参照形式

強調

インラインでのコード表示

画像について

インライン形式

参照形式

その他

バックスラッシュでのエスケープ

スポンサードリンク