Markdownとは

Markdownは、やはり簡単に文章構造を明示出来る、という点が一番魅力的。
最近では色々なアプリにも対応しているので、使えて損はないと思います。

そんなMarkdown、人に教える機会があったので、ついでに分かりやすく纏めてみました。

Markdown 早見表

この早見表では、いくつかの記法がある場合、主に自分が使っているものを表記しています。他の記法がある場合等に関しては詳細がありますので、要素名のリンク先からご覧下さい。

不可視文字について

   : 半角スペース

  : 改行

ブロック要素

<p>空白行で囲まれた行。複数行はそのまま1行として認識される。</p>

改行する際は<br />
半角スペース2つ以上を末尾に追加

<h1>タイトル<h1>
<h2>タイトル<h2>

<blockquote>
    <p>引用文。<br />
    先頭に <code>></code> をつける。</p>
</blockquote>

<ul>
<li>並列リスト</li>
<li>並列リスト</li>
</ul>

<ol>
<li>順序リスト</li>
<li>順序リスト</li>
</ol>

<pre><code>&lt;div&gt;
    &lt;p&gt;先頭に4つの半角スペース もしくは タブを挿入。インデントする際は繰り返し挿入。&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<div>
    <p>先頭に4つの半角スペース もしくは タブを挿入。インデントする際は繰り返し挿入。</p>
</div>
    

<hr />

インライン要素

要素	Markdown 記法
	HTML変換例	HTML出力例
リンク	インラインリンクは [example.com](http://example.com/) こんな感じ
	<p>インラインリンクは <a href="http://example.com/">example.com</a> こんな感じ</p>	インラインリンクは example.com こんな感じ
強調	斜体で*強調*する    太文字で**強調**する
	斜体で<em>強調</em>する<br /> 太文字で<strong>強調</strong>する	斜体で強調する 太文字で強調する
コード	文章内のコードは `printf()` のように記述
	文章内のコードは <code>printf()</code> のように記述	文章内のコードは printf() のように記述
画像	
	<img src="/img/sample.png" alt="画像サンプル" />

タイトル

タイトルの書き方はいくつかあります。
まず表で紹介した書きかた。#が増えてく毎に、タイトルとしての重みが弱くなります。

囲むように記述することも可能です。
#で囲む際、右側の数はいくつでもよいよう。

また、h1、h2に相当するものに関しては、以下のように書く事も可能です。

引用

まず基本の書き方。

引用を入れ子にしたい場合は、以下のように記述。

引用内にコードブロックを挿入する場合はこんな具合に。

リスト

並列リストの書き方は、以下の3種類があります。

リストの入れ子は以下のように記述します。

リスト内に段落を挿入する場合はこんな風に。

HTML出力すると、以下のようにliタグの中にpタグが挿入されます。

<ol>
<li><p>段落を挿入する場合</p>
<p>先頭に4つのスペース または タブを挿入してから文章を書く。</p></li>
<li><p>順序リスト内の段落</p></li>
</ol>

リスト内に引用やコードを表示する場合は。

罫線

罫線の書き方はいろいろあります。

規則性が合っていれば、アスタリスク * や ハイフン - の数は多くてもおＫ。

リンク

まず基本の書き方。

リンクさせたいテキスト を、ブラケット（角括弧）[] 内に。
リンク先URL をパーレン（丸括弧）() 内に書きます。

HTMLで出力した際のtitle属性を設定することも可能です。
タイトルは () 内のリンクの後に半角スペースを挿入後、ダブルクォート "" で囲みます。

※ [example.com](http://example.com/) の前後に半角スペースがないと認識しないアプリがあるよう（特に海外製）なので、半角スペースは入れた方が無難です。

URLそのままでいいって場合は <> で囲むだけ。

また、リンクを別に書いておいて参照させることも。

参照はこんな方法もあります。

強調

強調はアスタリスク * で囲む方法とアンダーライン _ で囲む方法があります。

HTML出力の際、斜体は em で。太文字は strong で囲まれます。

※ * もしくは _ の前後に空白を挿入すると強調として認識されなくなります。

コード

コードはバッククォート ` で囲みます。

バッククォート2個で囲むと、段落になります。

HTML出力すると、以下のように。

<p><code>バッククォート2個で囲むと、段落で囲まれる。</code></p>

画像

画像は必ず ! を先頭につけ、
タイトル をブラケット（角括弧）[] 内に、
パス を() パーレン（丸括弧）() 内に書きます。

リンクと同様、HTMLで出力した際のtitle属性を設定することも可能です。
タイトルは () 内のパスの後に半角スペースを挿入後、ダブルクォート "" で囲みます。

またリンクと同様、参照させることも可能。

注意点

※ リストじゃない

数字+カンマで終わる場合、リストとして認識されてしまいます。

リストとして認識されないようにするためには、バックスラッシュでエスケープを。

※ 強調じゃない

文中にアスタリスク * もしくはアンダースコア _ を使う際、強調として認識されてしまうことがあります。
その場合は、バックスラッシュ \ でエスケープさせてください。

エスケープさせるには バックスラッシュ \ と覚えておけばおっけ！

Markdownアプリ

ついでに私がMacにインストールしている Markdown を使えるアプリをご紹介。

Day One

一番Markdownを多用しているのが、シンプルな日記アプリ「Day One」。
私は備忘録として、勉強していることや、開発したレシピなんかを細々メモしています。

Markdownを使うことで、文章に意味を持たせられるし、後々読み返す時にも美しく読みやすい。また、iPhoneやiPadアプリとも連携しているので、書きたい時に書け、読みたい時に読めるのが嬉しいところ。

iPhone、iPadアプリも合わせてどうぞ。

ちなみにDayOneは .mdファイル（Markdown記法で書かれたファイル)、.txtファイル、.pdfファイルへの書き出しが可能です。

Markdown

他に最近使っているのは、Markdown専用アプリ。その名も「Markdown」。

左側がMarkdownを記入していくところ。右側は、プレビューです。
書きながらどんなスタイルが適用されるのかが分かるし、シンプルなのが分かりやすいところ。さらに無料です。

ショートカットもあり、ちょっと覚えにくい「リンク」や「画像」のタグも簡単に入力できます。

HTMLは書き出しは ⌘ + E でらくちん。

以上、Markdownのお話でした。
思ったより長くなってしまいましたが、少しでもみなさまのお役に立てれば幸い。ぜひ活用してみてくださいね。