MarkDown記法

  • 19
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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記法