Markdownというコトバを耳にしたことはありますか? Wikipediaにはこう書かれています。

Markdown は、文書を記述するための軽量マークアップ言語のひとつである。「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)により作成された。Wikipedia:Markdownより

つまり、メモ帳や電子メールのプレーンテキストを読みやすく、かつコンピュータ的に変換しやすくした文書の書き方です。書き方がシンプルで人間でもスラスラと読めるのでとても便利です。

  • 見た目がシンプル
  • HTMLタグがそのまま使える
  • 記述が単純でどんなテキストエディタでも入力できる

と、いいところどりのMarkdown記法。ぜひ覚えてみませんか?

実際に使ってみよう

基本的な記述

改行

段落(改行2回)

見出し(# × n)

罫線(*** or ---

アンカータグでリンク

プレースメントによるリンク作成

太字、斜体(_ or *)

箇条書きリスト:番号なし(* or + or -)

箇条書きリスト:番号あり(n.)

階層のある複雑な箇条書き

引用(>)

コード(半角スペース × 4)

target=”_blank”の指定

年号などの記述

HxタグにIDをつける

覚えるまでが大変ですが…入力のしやすさはピカイチ

実際に使ってみよう

Markdown記法に対応したソフトウェアはいろいろとありますが、今回はWordPressで使ってみましょう。
WP-Markdown というプラグインが用意されているのでそれをインストールして有効化するだけで、記事やコメント欄で使えるようになります。

2014/4/20 追記
現在はWordPress.com公式プラグイン Jetpack がMarkdownに対応しています。Jetpackをすでに使っている場合は新たなプラグインを入れるよりもJetpackの機能を使う方が便利です。Jetpackの設定画面からMarkdownを有効化してください。

インストールすると記事作成のエディタがこのように。 WP-Markdownのエディタ

プラグインの準備が整ったら実際に書いてみましょう。

Markdownは基本的にはHTMLとして動作します。<a>タグを入れればリンクできますし、<img>タグで画像も貼れます。<script><br>も問題なく動作します。
WP-Markdownでも入力欄の見た目はHTMLコードの入力欄のようです。 しかし、特定の記述をするとその箇所だけ変換されて出力されます。

このブログのデザインの場合はこんな感じ。

記法に則って入力

HTMLに変換されて出力

ブラウザ上での表示

Markdownを使えばシンプルな記述でリンク
画像
も自在に表現できます。

見出しも使えるし

引用もOK


と、いう具合で入力したテキストがHTMLに変換されます。

SyntaxHighlighter Evolved との併用はまた別の記事でやるとして、今回は基本的な記述を紹介します。

基本的な記述

改行(半角スペース2回+改行)

改行したいところで半角スペース2回+ENTER Markdown記法では、単にテキストを改行しただけでは改行されずに半角スペースに変換されます。 半角スペース2回打ってから改行すると<br>に変換されます。

入力

出力

段落(改行2回)

1度だけの改行は無視されますが、2度改行すると段落として扱われ<p>タグが挿入されます。

入力

出力

見出し(# × n)

見出しは行頭に#を記述します。#の数で見出しのレベルが決まります。

入力

出力

入力

出力

入力

出力

また、<h1><h2> に限りこのような記述でも可能です。

入力

出力

入力

出力

-= が3つ以上続くと適用されます。

罫線(*** or ---

1行に *- が3つ以上あると<hr>に変換されます。
空白は関係なく、下記はすべて罫線です。

入力

出力

アンカータグでリンク

リンクを貼るには以下のように書きます。

入力

出力

タイトルは省略できます。URLもhttp://~かかずに相対パスで指定することもできます。

入力

出力

プレースメントによるリンク作成

アンカータグはプレースメントを使った記述もできます。 URLやタイトルにID(数字)を割り振り、そのIDの情報を任意の箇所に記述すればIDを元にリンクが生成されます。

入力

出力

この時、プレースメントに利用した下部のURLやタイトルの情報は表示されません。

太字、斜体(_ or *)

斜体(イタリック体)
文字列を アスタリスク1回 *、もしくはアンダーバー1回 _ で囲むと斜体になります。

太字
文字列を アスタリスク2回 **、もしくはアンダーバー2回 __ で囲むと太字になります。

太字の斜体
文字列を アスタリスク3回 ***、もしくはアンダーバー3回 ___ で囲むと太字の斜体になります。

入力

ブラウザでの表示

イタリック体
イタリック体
太字
太字
太字の斜体
太字の斜体

出力

※WP-Markdown ver. 1.1.6 の段階ではエディタ上で改行せずに太字や斜体を複数いれるとエディタ下にあるプレビューでの表示が変になるっぽい。記事を保存して記事としてみると正常に処理されています。

箇条書きリスト:番号なし(* or + or -)

箇条書きは行頭に アスタリスク *、プラス +、 ハイフォン- のいずれか
※開始記号とテキストの間に半角スペース必須

入力

ブラウザ上での表示

  • トマト
  • レタス
  • きゅうり

出力

箇条書きリスト:番号あり(n.)

連番を振るなら 数字.(ピリオド) ※同じ階層の場合、数字は無視されます

入力

ブラウザ上での表示

  1. 砂糖
  2. しょうゆ
  3. 味噌

出力

階層のある複雑な箇条書き

箇条書きの記号の前に、インデント(半角スペースを4つ)を入れて階層のある複雑なリストを表現できます。 ※半角スペース1つでも1階層として変換されまますが、2階層目はインデント2回(半角スペース4つ×2)にしないと1階層目として扱われます。

入力

ブラウザ上での表示

  • アメリカ
    • 日本
    • 中国
      • ロシア
  • トルコ

出力

引用(>)

引用は行頭に > をつけます。メールでも同じみの書き方ですね。

入力

出力

段落を作るまでは改行しても引用扱いになります。

入力

出力

コード(半角スペース × 4)

行頭にインデント(半角スペースを4つ)をいれるとHTMLタグがコードとして表示されます。

入力

出力

target=”_blank”の指定

外部リンクを張る時は別窓で開きたいところですが、残念ながら Markdown記法では target属性を指定できません。指定したい場合はHTMLをそのまま記述しましょう。

年号などの記述

数字. と記述すると箇条書きが適用されてしまいますので、その場合はエスケープ記号(\ マーク)を使います。 . の手前に\ マークを記述すれば . はただのピリオドという文字として扱われます。

入力

出力

HxタグにIDをつける

行末に {#ID} をつけます。

入力

出力

覚えるまでが大変ですが…入力のしやすさはピカイチ

長くなりましたが、記述方法はこんなところでしょうか。

単純な記事なら見た目がシンプルでわかりやすくなりますし、エディタの表示モードを変えずにHTMLタグを直接入力して複雑な記事もつくれます。
記述が単純で、どんなテキストエディタでも簡単入力できるので、スマフォで記事を作成してWordPressに貼り付けてパブリッシュ。そんなことも可能だと思います。