Markdown記法まとめ
はてなブログでを始めるにあたって、Markdown記法とやらが使えるらしいので以降これを参考にして記事を書くためにまとめておこうと思う。
基本的に紹介する順番などは公式の構文規則等が定義してあるDaring Fireball: Markdown Syntax Documentationに従うこととする。また、はてなブログで使用することを目的としてまとめているため、使用できない文法は表記しない。
記事を書くにあたってこれらの記事を参考にさせてもらった。
- 文章作成やメモ書きにも便利、Markdown記法 | Web Design KOJIKA17
- はてなで使えるMarkdown記法まとめ - 開発メモ
- SimplenoteでMarkdown記法を使ってみた | How2すいとー
- Qiita - Markdown記法 チートシート - Qiita
すごくわかりやすいからほぼ同じ内容になりそうだ…
Markdown記法とは
Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として、ジョン・グル―バーとアーロン・シュバルツにより作成された。
Markdown - Wikipediaより
ブロック要素
段落と改行
- 一つ以上の空行までを一つの段落として扱う
- 同じ段落で改行を行いたい場合は文末に半角スペースを二つ以上入れる
例
一つ目の段落(改行→)
改行後
二つ目の段落(段落中の改行半角スペース二つ→)
二行目
結果
一つ目の段落(改行→) 改行後
二つ目の段落(段落中の改行半角スペース二つ→)
二行目
見出し
- 文の始めに#をつけることで見出しとすることができる
- #の数によって見出しのレベルを変えることができる(最大6個)
- #で見出しを設定する場合には、見出しの最後に同じ数の#を挿入することで見栄えが良くなるかもしれない
- 別の方法として見出しにしたい文章の下の行に = か - の行を入れることで見出しとする方法もある。この時 = だと一番大きな見出しとなり、- だと二番目に大きな見出しとなる
例
#見出し1 見出し1 === ##見出し2 見出し2 --- ###見出し3### ####見出し4 #####見出し5 ######見出し6 ########見出し7
結果
見出し1
見出し1
見出し2
見出し2
見出し3
見出し4
見出し5
見出し6
#見出し7
引用
- 引用を行うには段落の始めに>をつける
- 二つ以上入れることで入れ子にすることもできる
- 引用の中に他のMarkdown記号を含むこともできる
例
> ###引用
>> 入れ子
>> 1. リスト1
>> 2. リスト2
>> `int main(){ return 0; }`
結果
引用
入れ子
1. リスト1
2. リスト2
int main(){ return 0; }
リスト
- 箇条書きなどのリストを作る場合は *, -, +のどれかの後に半角スペースを入れて文章を書く
- 番号付きリストを作る場合は1.のように * などの代わりに数字とピリオドを入れる
- 番号付きリストは入力した数字に関わらず1から順番に数字が割り当てられる
- リストの項目の間に空行がある場合は項目と項目の縦間隔が大きくなる
- 一つの項目に二つの段落を入れたい場合は二つ目の段落の文章の前に半角スペースを4ついれる(ここではインデントを合わせるために6ついれている)
- 項目に引用を含むこともできる
- 項目としてコードブロックを入れる時はコードの前に半角スペースを8つ入れる
- 階層を表す場合は半角スペース4つを一つの階層とすることで階層を管理する
- 通常の箇条書きの中に番号付きの箇条書きを書くことはできない
例
3. 動物
* 犬
- チワワ
* 猫
2. 植物
+ アサガオ
>日本で最も発達した園芸植物
+ ヒマワリ
5. 数学
* 足し算
int main(int a, int b){ return a + b;}
結果
- 動物
- 犬
- チワワ
- 猫
- 犬
- 植物
-
日本で最も発達した園芸植物
ヒマワリ
-
- 数学
足し算
int main(int a, int b){ return a + b;}
コードブロック
- 文章にプログラムなどのコードを含めることができる
- 使用方法は行の始めに半角スペースを4つ入れてからコードを書き始める
- コードブロックは半角スペースが入っていない行まで続く
例
ここはコードブロックではありません
ここはコードブロックです
二行目のコードブロックです
ここは違います
結果
ここはコードブロックではありません
ここはコードブロックです
二行目のコードブロックです
ここは違います
罫線
- 三つ以上の-(ハイフン)か*(アスタリスク)で構成された行は罫線となる
- 間に文字が入ると罫線とはならないが、半角スペースであれば罫線となる
例
*** - - - - - -----これだとならない---
結果
-----これだとならない---
スパン要素
リンク
- Markdown記法には埋め込みリンクと参照リンクの二つのリンク方法がある
- マウスポインタをリンクに合わせた時に表示するテキストを設定する場合は、"(ダブルクオート)でなく'(シングルクオート)で囲むことで設定することもできる。参照リンクの場合は()で囲ってもよい
埋め込みリンク
- 埋め込みリンクでは
[リンクにするテキスト](URL)でリンクとする [リンクにするテキスト](URL "テキスト")とすることでマウスポインタをリンクに合わせた時に表示するテキストを設定できる
例
[Google](http://google.com/)に飛びます [リンク先](http://www.yahoo.co.jp/ "yahooに飛びます")はマウスポインタを合わせるとわかります
結果
Googleに飛びます
リンク先はマウスポインタを合わせるとわかります
参照リンク
- 参照リンクは
[リンクにするテキスト][id]として文章に埋め込み、後で[id]: URLと定義する [id]: URL "マウスポインタをリンクに合わせた時に表示するテキスト"とすることでマウスポインタをリンクに合わせた時に表示するテキストを設定できる- idは数字, アルファベット, ひらがな, カタカナ, 漢字のどれでもよい
- idとしてアルファベットを使用する場合大文字と小文字は同じ文字として扱われる
- 文中で
[リンクにするテキスト][]として、後で定義する時に[リンクにするテキスト]: URLとすることでリンクにするテキストをidとして使用することができる
例
このブログの[TOPページ][top]に飛びます idは数字でも[Google][1]に飛べます カタカナでも[yahoo][ヤフー]に飛べます このようなリンク方法でも[top][]に飛べます [top]: http://centraleden.hatenablog.com/ "TOPページに飛びます" [1]: http://google.com "Google" [ヤフー]: http://www.yahoo.co.jp/
結果
このブログのTOPページに飛びます
idは数字でもGoogleに飛べます
カタカナでもyahooに飛べます
このようなリンク方法でもtopに飛べます
強調
- 文字を強調したい場合は二つの*(アスタリスク)か_(アンダースコア)で囲む
- 文章中で強調記号としてでは無く*を使いたい場合は*の前に\を入れる
例
文字を**強調**します __文字__を強調しました これは\*\*強調\*\*されません
結果
文字を強調します
文字を強調しました
これは**強調**されません
コード
- 通常の文章の中で一部だけコードブロックにしたい場合は
`int main()`のようにコード部分を`(バッククオート)で囲む - コードの中で ` を使用する場合は
``int main(co\`de)``のように二つの ` で囲む - コード部分の開始文字や終了文字が ` の場合はそれらがMarkdown記号ではないと明示するために
`` `code` ``のように間に半角スペースを入れる
例
足し算をするコードは`int main(int a, int b){return a + b;}`となります
コード内に\`がある時は``printf("co`de\n");``となります
\`で囲まれたコードは`` `int main()` ``のようにします
結果
足し算をするコードはint main(int a, int b){return a + b;}となります
コード内に`がある時はprintf("co`de\n");となります
`で囲まれたコードは`int main()`のようにします
画像
- 画像を埋め込む場合は
と書く - リンクと同様に " で囲むことでマウスポインタをリンクに合わせた時に表示するテキストを設定できる
- リンクと同様に参照型の方法で画像を埋め込むこともできる
例
 参照型だと![icon][ic]と書きます [ic]: http://cdn1.www.st-hatena.com/users/ce/centraleden/profile.gif
結果
参照型だとと書きます
その他
ハイパーリンク
- テキスト等を設定せずに簡単にリンクを貼りたい場合は
<URL>と書く - URLの部分にメールアドレスを設定することもできる
例
<http://centraleden.hatenablog.com/>
結果
http://centraleden.hatenablog.com/
バックスラッシュエスケープ
- Markdown記号を文字として表示したいときに使う
- Markdown記号の前に\を入れる
例
\#見出しになりません 文章中も\`code`できます
結果
#見出しになりません
文章中も`code`使えます
表
- 一行目は項目名を|で区切って書く
- 二行目は文字をどちらに寄せるかを|:-|(左寄せ), |-:|(右寄せ), |:-:|(中央寄席)から指定する
- 三行目以降は入れたいデータを|で区切って書く
例
指定無し|左寄せ|中央寄せ|右寄せ -|:-|:-:|-: TOP|クラース|ミント|クレス TOD|スタン|ルーティ|マリー TOE|リッド|ファラ|メルディ
結果
| 指定無し | 左寄せ | 中央寄せ | 右寄せ |
|---|---|---|---|
| TOP | クラース | ミント | クレス |
| TOD | スタン | ルーティ | マリー |
| TOE | リッド | ファラ | メルディ |
打ち消し線
- 文字に打ち消し線を付ける場合は2つの ~ (チルダ)で囲む
例
文字を~~打消し~~ます
結果
文字を打消します
参考文献
Daring Fireball: Markdown Syntax Documentation
文章作成やメモ書きにも便利、Markdown記法 | Web Design KOJIKA17
はてなで使えるMarkdown記法まとめ - 開発メモ
SimplenoteでMarkdown記法を使ってみた | How2すいとー
Qiita - Markdown記法 チートシート - Qiita
Markdown - Wikipedia
