Jekyllにおけるシンタックスハイライト

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に置換することで,シンタックスハイライトが適用されました. 試行錯誤の末,シンタックスハイライトの適用までこぎつけましたが,この辺り十分に理解できていないかもしれません.

スポンサーリンク