Edited at

MarkDown記法

More than 3 years have passed since last update.


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


(ハッシュ)の数と見出しのレベルが一致します。


MarkDown

# 見出しh1

## 見出し h2
### 見出し h3
#### 見出し h4
##### 見出し h5
###### 見出し h6


HTML

<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


MarkDown

段落を分けるには改行の後に(スペース)

空白を入れるだけ。



HTML

<p>段落を分けるには改行の後に</p>

<p>空白を入れるだけ。</p>


[結果]


段落を分けるには改行の後に

空白を入れるだけ。



改行 br


MarkDown

複数行で改行を入れたい場合は、  (スペース)x2

改行の後に半角スペース2回以上入れる。 (スペース)x2
改行するだけでは、(スペース)x2
改行されないので


HTML

<p>複数行で改行を入れたい場合は、<br>  

改行の後に半角スペース2回以上入れる。<br>
改行するだけでは、<br>
改行されないので</p>

[結果]


複数行で改行を入れたい場合は、


改行の後に半角スペース2回以上入れる。


改行するだけでは、


改行されないので



強調 em strong


MarkDown

強調を示す場合は*(アスタリスク) で囲むか  

_(アンダースコア) で囲む
*em* は*か_で一つ囲む
__strongは__ *か_で二つ囲む


HTML

<p>強調を示す場合は*(アスタリスク) で囲むか  <br>

_(アンダースコア) で囲む <br>
<em>em</em> は*か_で一つ囲む <br>
<strong>strongは</strong>*か_で二つ囲む</p>

[結果]


強調を示す場合は*(アスタリスク) で囲むか


_(アンダースコア) で囲む

em は*か_で一つ囲む


strongは *か_で二つ囲む



引用 blockquote


MarkDown

> 引用な文章です。

> > 入れ子にすることもできる。


HTML

<blockquote>引用な文章です。

<blockquote>入れ子にすることもできる。</blockquote>
</blockquote>

[結果]


引用な文章です。


入れ子にすることもできる。




リスト(リスト番号なし ) ul、li


MarkDown

リストを示すには

*(アスタリスク),-(ハイフン),+(プラス)のどれかを
入力し、スペースまたはタブで挿入する。
* 上下に空白を一つ入れよう
+ 記号の前に空白をつけると見れなくなるよ
- 記号の後に入れるスペースをお忘れなく


HTML

<p>リストを示すには<br>*(アスタリスク),-(ハイフン),+(プラス)のどれかを<br>

入力し、スペースまたはタブで挿入する。<p>
<ul>
<li>上下に空白を一つ入れよう</li>
<li>記号の前に空白をつけると見れなくなるよ</li>
<li>記号の後に入れるスペースをお忘れなく</li>
</ul>

[結果]


リストを示すには

*(アスタリスク),-(ハイフン),+(プラス)のどれかを


入力し、スペースまたはタブで挿入する。

* 上下に空白を一つ入れよう

+ 記号の前に空白をつけると見れなくなるよ

- 記号の後に入れるスペースをお忘れなく



リスト(リスト番号あり) ol 、li


MarkDown

1. item1 数字は適当でも

3. item3 順番に表示
2. item2 されるよ!
2. item4 便利だね。


HTML

<ol>

<li>item1 数字は適当でも</li>
<li>item3 順番に表示</li>
<li>item2 されるよ!</li>
<li>item4 便利だね。</li>
</ol>

[結果]



  1. item1 数字は適当でも

  2. item3 順番に表示

  3. item2 されるよ!

  4. item4 便利だね。



リンク


MarkDown

[ローカルホスト](http://localhost)

[Google] [1]
[Yahoo] [2] or [MSN] [3].



HTML

<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

Yahoo or MSN



参考リンク

GitHubでブログの作成 - Markdown Markup 違い

文章作成やメモ書きにも便利、Markdown記法

脱GitHub初心者を目指す人のREADMEマークダウン使いこなし術

Markdown記法を使うと文書作成効率が2倍になるよ!

Markdown記法