WordPressのJetpackのマークダウンプラグインがすごく良さそうだったので翻訳しながらまとめました

こんにちは。
マークダウンって便利ですよね。
マークダウンをもっと使いたいなって思っているのですがなかなか方言などもあって使いづらいな、と思っていました。
WordPressで記事を書く時にどんなマークダウンが良いかなと思い、WordPress開発元謹製のJetpackにあるMarkdownを使ってみました。

目次

インストール & 初期設定

管理画面のプラグイン新規追加からJetpackをインストールしておきます。

JetpackはマークダウンだけじゃなくてWordPress用の便利なプラグインが揃っていて、色々と便利です。
管理画面左上にあるJetpackの設定画面から「プレーンテキストの Markdown 構文で投稿やページに書き込み」をオンにしておきます。
これはマークダウンで書かれたWordPressの投稿を保存時にマークダウンからマークアップ(HTML)に変換するかどうか、を選ぶことができます。
どちらでも良いと思うのですが、マークダウンで統一しておいたほうが見通しが良いのでオススメです。

よく使うマークダウン

個人的によく使うマークダウンについて列挙しておきます。

  1. 見出しをつける#
  2. 番号付き、番号なしリスト(数字、アスタリスク)
  3. コード(バッククォート3つ)
  4. リンク(四角括弧、丸括弧でリンク名、URLの順)

実際にこの記事でも使っていますね。

マークダウン記法

こちらに公式サイトのリファレンスがあります。

ざっくり順を追って見ていきます。

マークダウンでの書き方 処理済み
強調
*emタグで強調します* _emタグで強調します_
**ストロングタグで強調します** __ストロングタグで強調します__
emタグで強調します
ストロングタグで強調します

WordPress.comのテーマでは強調タグによって違った出力となることがあります。

インラインリンク
A [リンクはコチラ](http://example.com "タイトル属性に出力される文字列")

多くのブラウザではマウスホバー時にタイトル属性の文字列が出ます。
や といったWordPressのショートコードは、リンクより優先度が低いのでリンクとして変換されません。

リンクはコチラ
参照リンク(リファレンスドリンク、後から参照できるリンクです)
[こちらのリンク][1]を参照するか、[こちらのリンク][2]を参照してください。

[1]: http://example.com/ "タイトル"
[2]: http://example.org/ "タイトル"

参照リンクは投稿のどこにでも書くことができます。

こちらのリンクを参照するか、こちらのリンクを参照してください。
インライン画像(インラインイメージ)
ロゴ: ![代替えテキスト](/wp.png "タイトル")

代替えテキスト(Alt属性)は見栄えが悪くなることがあります。

ロゴ: 代替えテキスト
参照画像(リファレンスドイメージ)
小さいロゴ: ![代替えテキスト][1]

[1]: /wp-smaller.png "タイトル"
小さいロゴ: 代替えテキスト
リンク画像(リンクドイメージ)
リンクされたロゴ: [![代替えテキスト](/wp-smaller.png)]
(http://wordpress.com/ "タイトル")
リンクされたロゴ: 代替えテキスト
脚注(フットノート)
もっと書きたいこと [^1]がある場合に使います。

[^1]: こちらに書きます。

脚注は投稿の一番下の部分に元の文章へのリンクと一緒に追記されます。

もっと書きたいこと1がある場合に使います。


  1. こちらに書きます。
改行
Markdown(のプラグインとWordPress.com)では組み込み済みの関数との兼ね合いのため、一般的なダブルスペース(連続した2つのスペース)による改行は行われません。通常の改行が改行として出力されます。
番号なしリスト(バレットリスト)
* 項目
* 項目
- 項目
- 項目
  • 項目
  • 項目
  • 項目
  • 項目
番号付きリスト
1. 項目
2. 項目 
  1. 項目
  2. 項目
混在リスト(番号付き、番号なし)
1. 項目
2. 項目
   * 混在
   * 混在
3. 項目
  1. 混在
  2. 混在
    • 混在
    • 混在
  3. 項目
引用句(ブロッククォート)
> 引用する文章
> > 引用された引用

> * 引用された
> * リスト

引用する文章

引用された引用

  • 引用された
  • リスト
フォーマット済みテキスト(プリフォーマッティッド、preタグ)
  行の開始に
  2つ以上のスペースを入れると
  非 常 に 正 確 に
  あなたの入力し文章が出
  力されます。
行の開始に
2つ以上のスペースを入れると
非 常 に 正 確 に
あなたの入力し文章が出
力されます。
コード(codeタグ)
`コードをここに書きます`
コードをここに書きます
コードブロック
~~~~
複数行にまたがった
コードブロックの場合には
波線4つです。
~~~~

```
バッククォート3つも同様です
```
複数行にまたがった
コードブロックの場合には
波線4つです。
バッククォート3つも同様です
シンタックスハイライト
```css
#button {
    border: none;
}
```

どの言語に対応しているかについてはサポートされる言語のリストを参照してください。(php, css, javascriptあります。latexもあります!)

#button {
    border: none;
}
見出し(ヘッダー、h1、h2など)
# 見出し 1
## 見出し 2
### 見出し 3 
#### 見出し 4 ####
##### 見出し 5 #####
###### 見出し 6 ######

ハッシュマーク(#、(ざっくり言うと)シャープ記号)で閉じなくても大丈夫です。

見出し 1

見出し 2

見出し 3

見出し 4

見出し 5

見出し 6

定義済みリスト(dlタグ)
WordPress
:  個人向けセマンティックプラットフォーム

Markdown
:  テキストからHTMLへの変換ツール
WordPress
個人向けセマンティックプラットフォーム
Markdown
テキストからHTMLへの変換ツール

定義済みリストについてはテーマによって挙動が変わります。

略語
マークダウンはテキストからHTMLに変換します。
*[HTML]: ハイパーテキストマークアップ言語

定義については投稿のどの位置に書いても良いです。

マークダウンはテキストからHTMLに変換します。.

日本語の情報

Vektorさんですでに日本語のリファレンス訳がありました。
併せて参考にしてください。

まとめと感想

少し前まではマークダウン用のプラグインは別のものが主流だと思っていましたが、現在はJetpack付属のプラグインが優秀のようですね。
オプションで変換しない、とできるのですが本文が書き換わってしまうことがあるのでバックアップや諦めの心が必要です。
シンタックスハイライトがついているのは便利ですね。知らなかったです。
テーブル(パイプで書くことが多い)が無いのは地味に困りますね。その部分だけ他のプラグインを入れると良いかなと思います。

マークダウンでもっといろんなものを書いていきたいな、と思うのですが方言は大変ですね。
日本語の情報はないと思って調べたんですがあるんですかね。