MarkDownとは
マークアップは今までHTML等に使ってて良く分かっているが
マークダウンはいったい何でしょう。
知らなかったので調べてみたことを備忘録がてら記述します。
MarkDown
文書を記述するための軽量マークアップ言語のひとつである。
「書きやすくて読みやすいプレーンテキストとして記述した
文書を、妥当なXHTML(もしくはHTML)文書へと変換できる
フォーマット」として、ジョン・グル―バー(John Gruber)と
アーロン・スワーツ(Aaron Swartz)によって考案された。
Markdownの記法の多くは、電子メールにおいてプレーン
テキストを装飾する際の慣習から着想を得ている。
-- Wikipedia(日本語訳)
単純に言うと文章を書くルール、記述方法ですね。
MarkDown記法に従って書くメリットは?
- 軽量マークアップ言語
- 簡単にHTML形式に表現できる
- 読み易い文章が書ける
一番大きいメリットは上記の通りだと思います。
MarkeDownを使う為には書き方を覚えないと行けないですが
HTMLを一度も使ってみた方はすぐ慣れると思います。
MarkDown記法
- 見出し:#、##、###
- 斜体:
*ABCDEFG*
- 強調:
**ABCDEFG**
- 箇条書き:
◦「*」「+」「-」
(記号の直後にスペースかタブ要)
◦行頭に数字+ピリオド:番号付け(記号の直後にスペースかタブ要)
◦箇条書き・番号付けの後ろで改行は、「行末スペース*2」で出来る
◦レベル2は、「 - 」。 - 引用:>
- リンク:
[リンクテキスト](URL "タイトル")
- 画像:
![代替テキスト](画像のURL)
- 段落内での改行:行末にスペース2つ
- コードの記述:行頭にスペース4つ またはタブ、バッククオート
- HTMLタグ:直接タグを書く(一部制限あり)
では、MarkeDownの基本書き方について紹介します。
詳細はMarkeDownの考案者であるジョン・グル―バー(John Gruber)のサイトを参考してください。
見出し #h1〜h6
#(ハッシュ)の数と見出しのレベルが一致します。
# 見出しh1
## 見出し h2
### 見出し h3
#### 見出し h4
##### 見出し h5
###### 見出し h6
<h1>見出し h1</h1>
<h2>見出し h2</h2>
<h3>見出し h3</h3>
<h4>見出し h4</h4>
<h5>見出し h5</h5>
<h6>見出し h6</h6>
[結果]
見出しh1
見出し h2
見出し h3
見出し h4
見出し h5
見出し h6
段落 p
段落を分けるには改行の後に(スペース)
空白を入れるだけ。
<p>段落を分けるには改行の後に</p>
<p>空白を入れるだけ。</p>
[結果]
段落を分けるには改行の後に
空白を入れるだけ。
改行 br
複数行で改行を入れたい場合は、 (スペース)x2
改行の後に半角スペース2回以上入れる。 (スペース)x2
改行するだけでは、(スペース)x2
改行されないので
<p>複数行で改行を入れたい場合は、<br>
改行の後に半角スペース2回以上入れる。<br>
改行するだけでは、<br>
改行されないので</p>
[結果]
複数行で改行を入れたい場合は、
改行の後に半角スペース2回以上入れる。
改行するだけでは、
改行されないので
強調 em strong
強調を示す場合は*(アスタリスク) で囲むか
_(アンダースコア) で囲む
*em* は*か_で一つ囲む
__strongは__ *か_で二つ囲む
<p>強調を示す場合は*(アスタリスク) で囲むか <br>
_(アンダースコア) で囲む <br>
<em>em</em> は*か_で一つ囲む <br>
<strong>strongは</strong>*か_で二つ囲む</p>
[結果]
強調を示す場合は*(アスタリスク) で囲むか
_(アンダースコア) で囲むem は*か_で一つ囲む
strongは *か_で二つ囲む
引用 blockquote
> 引用な文章です。
> > 入れ子にすることもできる。
<blockquote>引用な文章です。
<blockquote>入れ子にすることもできる。</blockquote>
</blockquote>
[結果]
引用な文章です。
入れ子にすることもできる。
リスト(リスト番号なし ) ul、li
リストを示すには
*(アスタリスク),-(ハイフン),+(プラス)のどれかを
入力し、スペースまたはタブで挿入する。
* 上下に空白を一つ入れよう
+ 記号の前に空白をつけると見れなくなるよ
- 記号の後に入れるスペースをお忘れなく
<p>リストを示すには<br>*(アスタリスク),-(ハイフン),+(プラス)のどれかを<br>
入力し、スペースまたはタブで挿入する。<p>
<ul>
<li>上下に空白を一つ入れよう</li>
<li>記号の前に空白をつけると見れなくなるよ</li>
<li>記号の後に入れるスペースをお忘れなく</li>
</ul>
[結果]
リストを示すには
*(アスタリスク),-(ハイフン),+(プラス)のどれかを
入力し、スペースまたはタブで挿入する。
- 上下に空白を一つ入れよう
- 記号の前に空白をつけると見れなくなるよ
- 記号の後に入れるスペースをお忘れなく
リスト(リスト番号あり) ol 、li
1. item1 数字は適当でも
3. item3 順番に表示
2. item2 されるよ!
2. item4 便利だね。
<ol>
<li>item1 数字は適当でも</li>
<li>item3 順番に表示</li>
<li>item2 されるよ!</li>
<li>item4 便利だね。</li>
</ol>
[結果]
- item1 数字は適当でも
- item3 順番に表示
- item2 されるよ!
- item4 便利だね。
リンク
[ローカルホスト](http://localhost)
[Google] [1]
[Yahoo] [2] or [MSN] [3].
[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"
<a href="http://localhost">ローカルホスト</a><br>
<a href="http://google.com/" title="Google">Google</a>
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a> or
<a href="http://search.msn.com/" title="MSN Search">MSN</a>
[結果]
[Google] 1
[Yahoo] 2 or [MSN] 3
1: http://google.com/ "Google"
2: http://search.yahoo.com/ "Yahoo Search"
3: http://search.msn.com/ "MSN Search"
参考リンク
GitHubでブログの作成 - Markdown Markup 違い
文章作成やメモ書きにも便利、Markdown記法
脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術
Markdown記法を使うと文書作成効率が2倍になるよ!
Markdown記法