JekyllのSyntax Highlightについて

Posted : 17 Apr 2020

プログラムのソースコードなどを見やすく表示できる様に、JekyllでSyntax Highlightを実装する。

スタイリングの例

環境

JekyllではLiquidのhighlight tagを用いることでSyntax Highlightが可能である。
highlight tagは次のように使用する。

1
2
3
4
5
6
7
{% highlight LANG OPTION  %}

code..
code..
code..

{% endhighlight %}

Jekyllではrougeを用いてSyntax Highlightを実装している。
rougeは複数の言語をサポートしている。highlightタグ内のLANG、OPTIONは以下のページを参考に値を設定する

前述の通り、Liquidのhighlightではrougeを使用している。rougeでマークアップされたclass（CSS）に対して個別にスタイリングを設定可能だが、rougeが提供するテンプレート(Class: Rouge::CSSTheme )が存在する。

テンプレートを使用する際はrougifyコマンドを使用する。

1
rougify style ${THEME}

{$THEME}部分はテンプレート(Class: Rouge::CSSTheme)の内容を指定する。

コマンドのサンプルは次の通りである。

1
2
3
4
5
6
7
8
# colorful theme
rougify style colorful

# github theme
rougify style github

# MonokaiSublime theme
rougify style monokai.sublime

生成されたCSSを任意の名前（たとえばsyntax.css）で保存し、HTMLで読み込めばスタイリングの完了である。