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コードの入力欄のようです。 しかし、特定の記述をするとその箇所だけ変換されて出力されます。 このブログのデザインの場合はこんな感じ。

記法に則って入力

Markdownを使えばシンプルな記述で[リンク](http://unguis.cre8or.jp/ "UNGUIS")も  
![画像](/icon240.png "アイコン")  
も自在に表現できます。  
## 見出しも使えるし
> 引用もOK

HTMLに変換されて出力

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

見出しも使えるし

引用もOK

ブラウザ上での表示

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

見出しも使えるし

引用もOK

と、いう具合で入力したテキストがHTMLに変換されます。
/**
 * 問題はSyntax Highlighter。
 * SyntaxHighlighter Evolved 限定になってしまうが、
 * 別プラグインを導入することで動作可能
**/
function hoge() {
    return true;
}
SyntaxHighlighter Evolved との併用はまた別の記事でやるとして、今回は基本的な記述を紹介します。

基本的な記述

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

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

入力

あいうえお  
かきくけこ

出力

あいうえお
かきくけこ

段落(改行2回)

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

入力

あいうえお

かきくけこ

出力

あいうえお

かきくけこ

見出し(# × n)

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

入力

#見出し

出力

見出し

入力

##見出し

出力

見出し

入力

######見出し

出力

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

入力

見出し
======

出力

見出し

入力

見出し
-----

出力

見出し

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

罫線(*** or ---

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

入力

* * *
*****
**********
---
----------

出力







アンカータグでリンク

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

入力

[リンクテキスト](http://www.example.com "タイトル")

出力

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

入力

[リンクテキスト](/test/)

出力

リンクテキスト

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

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

入力

[あのサイトへのリンク][1]
[あっちのサイトへのリンク][2]
-=-=-=-=-= 他の記述 =-=-=-=-=-
~~~~~~~~~~~~~~~
-=-=-=-=-= 他の記述 =-=-=-=-=-
[1]: http://example.com/ "タイトル"
[2]: http://www.example1.com/

出力

あのサイトへのリンク
あっちのサイトへのリンク
-=-=-=-=-= 他の記述 =-=-=-=-=-
~~~~~~~~~~~~~~~
-=-=-=-=-= 他の記述 =-=-=-=-=-
この時、プレースメントに利用した下部のURLやタイトルの情報は表示されません。

太字、斜体(_ or *)

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

入力

*イタリック体* _イタリック体_  
**太字** __太字__  
***太字の斜体*** ___太字の斜体___  

ブラウザでの表示

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

出力

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

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

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

入力

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

ブラウザ上での表示

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

出力

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

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

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

入力

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

ブラウザ上での表示

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

出力

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

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

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

入力

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

ブラウザ上での表示

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

出力

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

引用(>)

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

入力

> 引用です。

出力

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

入力

> 引用文のテスト  
改行しても引用になる  
何度改行しても
に括られます。

出力

引用文のテスト 改行しても引用になる。 何度改行しても
に括られます。

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

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

入力

    

出力

target=”_blank”の指定

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

年号などの記述

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

入力

2013. 平成27年

2013\. 平成27年

出力

  1. 平成27年
2013. 平成27年

HxタグにIDをつける

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

入力

### 見出し {#IDTEST}

出力

見出し

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

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

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

3 件のコメント

  1. ピンバック: WP-Markdown と SyntaxHighlighter Evolved を一緒に使う方法 | アンギス

  2. ピンバック: C4SA を使って WordPress ブログを作成してみる | C4SA 説明サイト

  3. ピンバック: メモ・Markdown記法 | D.I.Yと珈琲の香り