WordPressとMarkdownとシンタックスハイライトと私

画像はやる気のないダル子。

できるだけ手抜きしてブログ更新したい丁稚さんですよ。手抜き更新するには「HTMLなんか直に書いていられない」というのが正直なところ。そこで必要になるのがおなじみ簡略記法「Markdown」です。Markdownの詳細は他サイトにゆずる。

WordPressで、投稿画面にMarkdown形式テキストを書いたらブログを更新できる…それは過去5, 6年くらいの永遠の課題…。実現するためのプラグインは存在するのに、なかなか決定打がないんですよね。ポイントは以下のような感じ。

  1. WordPressの「ビジュアルリッチエディタ」と共存できるかどうか
  2. Markdownの便利な「亜流」に対応しているかどうか
  3. シンタックスハイライトはどうする?

で、まあ、2年ぶりくらいにまた調べてみました。

「ビジュアルリッチエディタ」との共存

ビジュアルリッチエディタは最新のWordPressに搭載されている「ワープロ感覚で文章を書ける便利なアレ」です。通常、「テキスト」モードと切り替えて両方使うことができるようになっています。

これね。
べつにぼくは両方使うことはないんだけど、Markdownなんて覚えてられないふつうの人向けにはビジュアルリッチエディタ残しておきたいですよね。

実はWordPressのMarkdown対応プラグインでは、切り替えて使うのは軒並み絶望的です。
プラグインによって、

  • ビジュアルリッチエディタが消える(WP-Markdown
  • 「テキスト」モードでMarkdownを入力できる。ビジュアルリッチエディタモードも残る(JetPack Markdown

のどちらか。前者はこの時点で選択肢から除外。

後者は一見べんりな気がしますが、やってみると 切り替え時に文章が破壊 されます。
例。Markdown で

と書いてビジュアルリッチエディタに切り替えると、

に…まあWordPressの内部データ構造上しかたなかったんでしょうね。
ということでMarkdownプラグイン自体は、JetPackに入っているMarkdown機能一択だと思います。

Markdownの亜流に対応

いっぽう、Markdown は実際には標準化されていなくて、いくつか足りない機能を拡張した亜流が存在します。去年あたりに「CommonMark」というのが策定されるはずだったけどぽしゃった…。

JetPackのMarkdownはどういうMarkdownが使えるか。実は…例によってきちんとドキュメント化されていないです。実際に触ってみると、だいたい以下のような感じです:

  • 標準Markdownには対応
  • php Markdown Extra をベースにしている
  • しかし動かない機能が多い…

具体的に見たほうが早いですね。


先頭大なりでの引用記法は対応

URLを生で書いても http://www.yahoo.co.jp/ ホットリンクにはなりません。
大なり小なりで http://www.yahoo.co.jp/ 囲んでください。

定義リスト
dl要素ですね。これができるのはうれしい

表も書けます

First Header Second Header
Content Cell Content Cell

でも、クラス指定などの属性追加はできないようです。

First Header Second Header {.full-width}
Content Cell Content Cell

けっこう使えますね! 生URLがホットリンクになってくれると、ふつうの人にもおすすめなんだけどなあ…やっぱ自分でプラグイン書かないとだめかしらん。

なお、このサイトはCSSをいじっているので、素の見た目はこんなきれいにはなりません。

シンタックスハイライト

上に挙げた例では、コードブロックがシンタックスハイライトされています。
Markdownプラグインを導入するだけでこれが実現されるとうれしいのですが、実際にはさらに別のプラグインと組み合わせています。それがCrayon Syntax Highlighter です。

Crayon はなかなか優秀で、Markdown環境かどうかにかかわらず <pre> <code> 要素内をフォーマッティングしてくれます。ただし、二つほど問題があります。

小なり大なり記号がエスケープされた状態で表示されてしまう

<&> これが &lt;&amp;&gt; こうなります…。

回避するためには Crayon の設定画面から Decode HTML entities in code Decode HTML entities in attributes にチェックを入れましょう。

なぜかコードブロックの最後に空行が追加される…

これが、

こうなります…。なんでかわかんない。なってるひと見かけないんだけど、丁稚さんが Crayon 使うとかならずこうなります。

しかたないのでCSSで強制的に最終行(と最終行の行番号)を display: none; にして回避します。

とまあ、ここまでいろいろ検討して、やっと使い物になるMarkdown環境が構築できました…。

え? なに?
そんなにグチこぼすならGitHub PagesでMarkdown使った静的サイトでもつくればいいんじゃないの、って?
それができたら苦労はしない!