Markdown メモ

ぼくちゃん Markdown についてよく忘れちゃうのでメモ。

ちなみに HTML タグとの併用は OK 。ただし、ブロック要素のタグは行頭に書き、かつブロック前後の行は空行にすること。さらにこの HTML ブロックの中では Markdown のルールは無効になるので注意。

記法

段落（<p>）、改行（<br />）

前後に空白行を挟むブロックは段落（<p>）。行末に半角スペースを2つ（以上）入れると改行（<br />）扱いで、行末に半角スペース2つ（以上）が入っていない改行は半角スペース扱いになる。

これは
ひとつめの  ※←ここに半角スペース2個入ってるから見た目上はここで改行される
段落です

これはふたつめの
段落です

見出し（<h1>～<h6>）

Setext 形式：<h1>と<h2>しか表現できない。「=」もしくは「-」で下線を引く。長さは文字列と合っていなくてもいいらしい。
atx 形式：<h1>～<h6>まで表現可能。行頭に「#」。並べる個数でレベルが決まる。

文字列
======

文字列
------

# 文字列

###### 文字列

強調（<em>、<strong>）

*文字列* で強調（<em>）、**文字列** で強い強調（<strong>）。「*」のかわりに「_」でもいい。

*文字列*  
**文字列**

水平線（<hr />）

3つ以上の「*」だけの行は水平線扱い。「-」や「_」でもいい。間に空白を挟んでいてもいい。ハイフンにすると Setext 形式の見出しと混同する。

段落1

***

段落2

リスト

順序なしリスト（<ul>、<li>）

行頭に「*」と半角スペース。「+」や「-」でもいいし混ざってもいい。先頭に半角スペース4つかタブ文字1つでネスト可能。

* sample1
    * sample1-1
        * sample1-1-1
    * sample1-2
* sample2
    * sample2-2
* sample3
* sample4

順序付きリスト（<ol>、<li>）

行頭に「数字」と「.」と半角スペース。数字は適当でいい。むしろ全部 1 でいい。先頭に半角スペース4つかタブ文字1つでネスト可能。

1. sample1
    1. sample1-1
        1. sample1-1-1
    1. sample1-2
1. sample2
    1. sample2-2
1. sample3
1. sample4

定義リスト（<dl>、<dt>、<dd>）

拡張記法 1。

<dt>…普通に記述、<dd>…行頭に「:」と半角スペース。<dd>は連続で書ける。<dd>と次の<dt>の間には空行を挟む。

sample1
: aaa
: aaa

sample2
: bbb

sample3
: ccc

引用（<blockquote>）

行頭に「>」。改行して書く場合は全ての行頭に「>」。入れ子OK。空行を挟むとそれぞれが<p>段落分けされ、全体を<blockquote>が囲う形になる。ネスト可能。

> 引用文です
> これはまだ一段落目、改行もしない
> 改行したい場合は行末に半角スペース2つ必要
> > ネストできます

> ネストを解除するときは空行を挟む
> 一段落目おしまい

> ここから2段落目、でもまだひとつの blockquote の中です

ソースコード（<pre>、<code>）

行頭に半角スペース4つ以上、もしくはタブ文字1つ以上で <pre>。バッククォート「」で囲った文字列は <code>。

    public static void main(String[] args) {
        doHoge();
    }

code

pre タグに関しては普段は Crayon 使ってるし、バッククォート（Shift+@）も馴染みが薄くて使いづらそうで普通にタグ打ちの方が早い。

表（<table>）

拡張記法 1。

一行目にヘッダ、二行目に仕切り、三行目以降に行。セルはパイプで区切る。仕切りのコロンの位置で左右寄せ・中央揃えができる。

| ヘッダ  | ヘッダ  | ヘッダ  | ヘッダ  |
| ------- | :------ | :-----: | ------: |
| セル    | 左寄せ  | 中央    | 右寄せ  |
| 二行目  | 二行目  | 二行目  | 二行目  |

リンク（<a>）

<url> もしくは <メールアドレス> で自動リンク。
[文字列](url) でtitle属性なしリンク。
[文字列](url "タイトル") でtitle属性つきリンク。

[uncoon.com](http://uncoon.com/ "アンクーン")

参照式というのもあるけど使わなそうなので省略。

画像（<img>）

![Alt文字列](url) でtitle属性なし。
![Alt文字列](url "タイトル") でtitle属性つき。

リンクの先頭に「!」を付けた感じ。

![nigauri.me](https://nigauri.me/wp-content/uploads/2013/06/logo.png "nigauri.me logo")

参照式というのもあるけど使わなそうなので省略。

リンクを張る際にややこしくなったりサイズが指定できなかったりしていろいろ不便なので、素直にタグ打った方が早いね。たぶん。

脚注

拡張記法 1。

私はうんこ[^1]と言った。

[^1]: 別名うんち。

エスケープ

記号を記号としてそのまま表示したい場合は「」でエスケープする。

対象文字は「」、「」、「*」、「_」、「{}」、「[]」、「()」、「#」、「+」、「-」、「.」、「!」。

*これは半角アスタリスクで囲まれたただの文字列として表示される*

便利ツール

テキストエディタ

Atom
超使いやすく拡張性も高いテキストエディタ。フリー。
デフォルトでMarkdownに対応していてライブプレビューもできる。ただし対応している記法がGitHub Flavored Markdownのため、Extraには完全に対応していないので注意。（例えばDefinition Listsなどが未対応）
テキストエディタ Atom 導入メモ

Chrome 拡張

Create Link
Webページのタイトルと URL から Markdown 形式のリンクを作ってくれる。デフォルトではリンクの title 属性は入れてくれないけど設定で変えられる。他にも Plain text、HTML、MediaWiki を選択可能なほか、独自の形式の追加もできる。

Firefox アドオン

Make Link
機能は前述の Create Link とほぼ同様。

WordPress プラグイン

Jetpack
多機能プラグイン。とうとう Markdown に対応するようになったので後述の Markdown on Save Improved が不要になってしまった。使用しているプラグイン を参照。
Markdown on Save Improved
Markdown で記述ができるようになるプラグイン。Jetpack が Markdown に対応するまではこれを使っていた。使用しているプラグイン を参照。
AddQuicktag
Markdown 書式をあらかじめ設定しておけばより手抜きができるに違いない。

ライブプレビュー

Markdown を書きながらプレビューできるサイト。

参考サイト

  1. 拡張された記法のため、使えない場合がある。Markdown on Save Improved、Jetpack では使える。 ↩ ↩ ↩