HTML は広く知られているマークアップ言語ですが、開始・終了タグや入れ子構造、デザインは CSS を使うなど、ちょっとしたメモ書きなどでは記述量が増えてしまいます。

そこで便利なのが Markdown です。
テキストのままでも編集容易性・可読性が損なわれず、 Markdown.pl などで HTML に変換されます。

Evernote, Tumblr, Qiita, Stack Overflow, Trello など様々なサービスで採用されている簡易マークアップ言語です。
当ブログの CMS である ghost でも採用されています。

見出し

見出しは6レベルまででレベル毎に # をつけます。

Markdown では次の用に記述します¹

# level 1
## level 2
### level 3
#### level 4
##### level 5
###### level 6

level1  
=====

level2  
-----

このように見出しレベル１，２については代替記法が存在します。

以下のような HTML に変換されます²

<h1>level 1</h1>  
<h2>level 2</h2>  
<h3>level 3</h3>  
<h4>level 4</h4>  
<h5>level 5</h5>  
<h6>level 6</h6>

<h1>level 1</h1>  
<h2>level 2</h2>

ghost では以下のように表示されます

level 1

level 2

level 3

level 4

level 5

level 6

level1

level2

段落と改行

段落を分けるときは２つの改行を記述します。単一の改行は変換時に削除されます。これは、改行を行う処理は画面の大きさに応じて Web ブラウザが担当すべきであるという設計思想によるものです。

Markdown では次の用に記述します

paragraph 1

paragraph 2  
paragraph 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit,  
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  
Ut enim ad minim veniam,  
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

以下のような HTML に変換されます

<p>paragraph 1</p>  
<p>paragraph 2paragraph 3</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,<br />  
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />  
Ut enim ad minim veniam,<br />  
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

ghost では以下のように表示されます(ghost では単一の改行が HTML に反映されます）

paragraph 1

paragraph 2
paragraph 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

文字の装飾

斜体、太字、打ち消し、引用、コードブロック、インラインコード、水平線が一般的です ghost にはハイライトがあります

Markdown では次の用に記述します

*斜体*  
**太字**  
<del>打ち消し</del>  
> 引用

` ` `
コードブロック
` ` `

    コードブロック（タブ）

    コードブロック（スペース）

`インラインコード`

罫線

-----

==ハイライト==

コードブロックや罫線は前後に改行がないと変換されない場合があります。また、インラインコードは前後にスペースがないと変換されない場合があります³

以下のような HTML に変換されます（実際の code タグや pre タグは要素名にスペースを含まない）

<i>斜体</i>  
<b>太字</b>  
<strike>打ち消し<strike>  
<blockquote> 引用 </blockquote>

< code>  
コードブロック
</ code>


< pre>インラインコード</ pre>

<hr>

<mark>ハイライト</mark>

ghost では以下のように表示されます。

斜体
太字
~~打ち消し~~

引用

コードブロック

コードブロック（タブ）

コードブロック（スペース）

インラインコード

ハイライト

<ul>  
  <li>item</li>
  <li><p>item</p>
    <ul>
      <li>item</li>
      <li>item</li>
    </ul>
  </li>
  <li><p>item</p>
    <ul>
      <li>item</li>
    </ul>
  </li>
</ul>

<ol>  
  <li>item</li>
  <li><p>item</p>
    <ol>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>

<ol>  
  <li><p>item</p>
    <ol>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
</ol>

ghost では以下のように表示されます
(ghost は順序ありリストをサポートしていません)

item
item
- item
- item
item
- item

1.item
1.item
1.1.item
1.1.item
1.item

2.item
2.1.item 2.1.item

リンクとイメージ

リンクや画像の埋め込みをする場合は以下のように記述します

Markdown では次の用に記述します

リンク  
[リンクラベル](リンクURL "タイトル")

イメージ(行頭の全角スペースは不要です)  

　![代替えテキスト](ファイルパス)

イメージリンク

[![代替えテキスト](ファイルパス)](リンクURL)

注釈
Markdown では次の用に記述します[^1]

注釈リンク
[^1]: すべての環境ですべての記法が使えるわけではありません。

リンクのタイトル、イメージの代替えテキストはオプションです。
ghost では、 ![]() とタイプするとプレビューエリアにイメージをアップロードできます。
アップロードできるファイル名は英数字のみです（記号を含みません）

以下のような HTML に変換されます

<a href="https://eyesaac.com/ja/" title="EST">eyesaac system technologies</a></p>

<img class="js-upload-target" src="/content/images/2017/05/ccbync-1.png">

<p>  
<a href="https://creativecommons.org/licenses/by-nc/4.0/deed.ja">  
<img src="/content/images/2017/05/ccbync-1.png" alt="CC-by-NC" title="">  
</a>  
</p>

<p>Markdownでは次の用に記述します<sup id="fnref:1"><a>1</a></sup></p>

<ol>  
<li class="footnote" id="fn:1">  
<p>すべての環境ですべての記法が使えるわけではありません <a title="return to article">↩</a></p>  
</li>  
</ol>

ghost では以下のように表示されます

リンク
eyesaac system technologies

イメージ

CC-by-NC