Jekyllが得意とするシンタックスハイライトですが、設定でつまずいたのでメモしておきます。 シンタックスハイライトにはrougepygmentsが利用されるようですが、ここではrougeを適用してみたいと思います。 まずは、下記のコマンドでrougeをインストールします。

gem install rouge

次に、”_config.yml”でシンタックスハイライトにrougeを指定しておきます。

highlighter: rouge

ここまでは、何てことないのですが、ここからつまずきました。 シンタックスハイライトのスタイルは”_syntax-highlighting.scss”で設定されているようです。 色などを変更したい場合は、このファイルを修正すれば良いはずですが、何故か変更が適用されません。

マークダウンでハイライトするときは、ソースコードを``で囲みます。 変換後のhtmlを確認すると、該当箇所は下記のように、クラス属性にhighlighter-rougeが設定されています。

<code class="highlighter-rouge"></code>

再度、”_syntax-highlighting.scss”を確認すると、クラス属性はhighlightとして設定されています。 そこで、ファイル内のクラス属性をhighlighter-rougeに置換することで、シンタックスハイライトが適用されました。 試行錯誤の末、シンタックスハイライトの適用までこぎつけましたが、この辺り十分に理解できていないかもしれません。