WordpressでMarkdown & Syntax Highlight

ワードプレスでMarkdownを使いたい。

最近、技術ネタのメモ用にGithub Pagesを利用しているのだけど、Github pagesでマークダウンに慣れるとWordpressが辛い。かといってここ1,2年くらいWordpressからGithub pagesに移行したという話もよく耳にするけど、WordpressはWordpressなりに便利なので完全移行も辛い。今更ながら、Markdownプラグインを入れてみる。あとMarkdownと併用できるSyntax Highlightについてもメモ。

結論から書くとマークダウンには「markdown-on-save-improved-2」、ソースコードのシンタックスハイライトには「Crayon Syntax Highlighter」を入れておけば良さげか。

markdown-on-save-improved-2 (https://github.com/zmax/markdown-on-save-improved-2)
Crayon Syntax Highlighter

markdown-on-save-improved-2

「three backticks」記法が使える

markdown-on-save-improved-2はthree backticks記法に対応しています。既存のマークダウン用プラグインであるmarkdown-on-save-improved(2ではない)やWp-Markdownではコードを記述する際に、three backticks記法は使えず、代わりに行初にスペース4つを挿入する必要がありました。下記のような書き方ができます。

インストール方法

markdown-on-save-improved-2のインストールは、ワードプレス管理画面のプラグイン検索では引っかからないので、https://github.com/zmax/markdown-on-save-improved-2のサイトから直接コードをダウンロードしてプラグインフォルダ(wp-content/plugings)に置く必要があります。

使用例

上記のキャプチャ例の場合は、下記のようにちゃんとシンタックスハイライトして表示されます。シンタックスハイライトの細かい設定は Crayon Syntax Highlighterでできます。

require "rubygems.rb"
if (true) {
    echo "Hello World"
}

require "rubygems.rb"

if (true) {

echo "Hello World"

}

Crayon Syntax Highlighter

シンタックスハイライトの設定はCrayon Syntax Highlighterプラグインを入れればできます。管理画面は「Settings」→「Crayon」からいけます。かなり細かく設定できます。下記のキャプチャはCraponの設定画面の上部ですが、下にさらに設定項目が続いています。

感想

Markdownのプラグインでは、「Wp-Markdown」 → 「markdown-on-save-improved」 → 「markdown-on-save-improved-2」と試してみましたが、「markdown-on-save-improved-2」で落ち着きそうな感じです。しばらくこれで試してみたいと思います。