Middleman v4でシンタックスハイライト

Middlemanでシンタックスハイライトするにはmiddleman-syntaxがある。でもこの日記はMiddleman v4で作っていて、middleman-syntaxは今日時点ではv4に対応していない。のでフォークして対応させようかなと思ったけど、ふと思い出した。kramdownがそもそもシンタックスハイライトに対応しているはずだ。

kramdownはRuby製のMarkdownパーサー＋αのライブラリーで、MiddlemanでMarkdownを使う時のデフォルトエンジンにもなっている。MiddlemanでのMarkdownエンジンの設定方法、調整方法は公式ドキュメントにある（テンプレートエンジンオプション）。markdown_engine設定はデフォルトのままで構わないので、markdown設定だけ、config.rbにこう追加した。

set :markdown, 'syntax_highlighter' => 'rouge'

これで、Markdownの記事でのコード部分にシンタックスハイライト用の<span>が追加される。ここではrougeを指定しているけどcoderayも使える（gemは自分でGemfileに書いてインストールする必要がある）。この設定ではブロックレベルのコードだけでなく、文中のspan要素もハイライトされる。この日記ではそのままにしているけど、嫌な場合には

set :markdown, 'syntax_highlighter' => 'rouge',
    'syntax_highlighter_opts' => {
      'span' => {'disable' => true}
    }

と、spanの時だけ無効化してやればいい。その他、使えるオプションはkramdownサイトのSyntax Highlighting With Rougeというドキュメントにあるので参照されたい（Coderayの場合はSyntax Highlighting With Coderay）。

これだけでは単に<span>が追加されるだけでスタリングはされない。CSSを追加する必要がある。Rougeで使えるテーマはRougeのthemesディレクトリーを見ればよくて、この日記ではGitHubテーマを使っている。stylesheets/highlight.css.erbというファイルを作って、こう書いた：

<%= Rouge::Themes::Github.render(scope: '.highlighter-rouge') %>

この設定にはRoom 3100というブログのmiddleman-blogのハイライトにMonokaiテーマを使うという記事を大いに参考にさせてもらった。ありがとうございます。

あとは「`…`」（インライン）やフェンストコードブロックでマークアップしてやればよい。注意が必要なのは、kramdownのコードブロックはGitHubのフェンストコードブロックとちょっと違って、「~」（チルダ）を三つ並べる（Language of Code Blocks）。

~~~ ruby
set :markdown, 'syntax_highlighter' => 'rouge'
~~~