Markdown記法を使ってみる

マークダウンの記述方法をきちんと勉強したことが無かったので、少し調べてみました。

Markdown記法について

Markdown記法は、通常HTMLを記述する際に必要なタグを、特定の記号などに置き換えて簡単に記述できる書き方です。
メモや議事録などの文章を書くときに便利で、GitHubやQiita、Tumblrなどでもこの記法が使えるようです。

プレビューしたりHTMLに変換するツールは色々ありますが、今回はオンラインツールのOnline Markdown Editorを使用します。

書き方まとめ

Markdownの書き方と変換後のHTMLです。

見出し(h1～h6)

Markdown

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

HTML

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

段落・改行(p,br)

Markdown

テキストテキスト
テキストテキストテキスト  
テキストテキスト

テキストテキスト

HTML

<p>テキストテキスト
テキストテキストテキスト <br />
テキストテキスト</p>

<p>テキストテキスト</p>

空行があれば段落と見なされます。
改行を入れる場合は行末に半角スペースを2つ入れます。
　

水平線(hr)

Markdown

テキストテキスト
***
テキストテキスト
- - -
テキストテキスト

HTML

<p>テキストテキスト</p>

<hr />

<p>テキストテキスト</p>

<hr />

<p>テキストテキスト</p>

1行内に3つ以上の「-」「*」「_」を並べると水平線になります。
間にスペースが入っても問題ありません。
　

強調(em,strong)

Markdown

テキスト*強調*テキスト
テキスト_強調_テキスト
テキスト**さらに強調**テキスト
テキスト__さらに強調__テキスト

HTML

<p>テキスト<em>強調</em>テキスト
テキスト<em>強調</em>テキスト
テキスト<strong>さらに強調</strong>テキスト
テキスト<strong>さらに強調</strong>テキスト</p>

「*」または「_」で囲むと強調になります。
1つでem、2つでstrongです。
　

リスト(ul,ol)

Markdown

* リスト
* リスト
 - 入れ子リスト
 - 入れ子リスト
1. 順序リスト
2. 順序リスト

HTML

<ul>
<li>リスト</li>
<li>リスト
<ul><li>入れ子リスト</li>
<li>入れ子リスト</li></ul></li>
<li>順序リスト</li>
<li>順序リスト</li>
</ul>

「* 」(アスタリスク+スペース)または「- 」(ハイフン+スペース)でリストになります。
入れ子のリストにする場合は行頭にスペースを入れます。
順序リストは数字+.です。
　

リンク(a)

Markdown

[cly7796.net](https://cly7796.net/blog/)

HTML

<p><a href="https://cly7796.net/blog/">cly7796.net</a></p>

[リンクテキスト](リンクURL)でリンクを設定できます。
　

コード表示(code,pre)

Markdown

テキスト`var count = 0;`テキスト

    function sample() {
    	cpnsole.log('sample');
    }

HTML

<p>テキスト<code>var count = 0;</code>テキスト</p>

<pre><code>function sample() {
    cpnsole.log('sample');
}
</code></pre>

「`」で囲うとインラインのコードになります。
複数行のコードは行頭に4つスペースを入れる。
　

引用(blockquote)

Markdown

> テキストテキスト
> テキストテキスト
> > テキストテキスト

HTML

<blockquote>
  <p>テキストテキスト
  テキストテキスト</p>
  
  <blockquote>
    <p>テキストテキスト</p>
  </blockquote>
</blockquote>

「> 」を行頭に入れると引用になります。
入れ子にすることもできます。

画像(img)

Markdown

![画像です](http://placehold.it/320x240/ff99bb/333333/&text=sample.jpg)

HTML

<p><img src="http://placehold.it/320x240/ff99bb/333333/&amp;text=sample.jpg" alt="画像です" title="" /></p>

で画像を埋め込みます。
　

その他

*などを文中で使いたい場合、「\*」のようにエスケープする必要があります。
　

【参考サイト】

• 文章作成やメモ書きにも便利、Markdown記法｜Web Design KOJIKA17
• README.mdファイル。Markdown記法まとめ | codechord
• Markdown記法 サンプル集 – Qiita
• Markdown – Wikipedia