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

環境
- Jekyll-4.0.0
- rouge-3.17.0
実装
マークアップ
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
は以下のページを参考に値を設定する
LANG
: 言語の種別を指定する。List of supported languages and lexersOPTION
: 行番号の表示有無を指定する。Line numbers
スタイリング
前述の通り、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で読み込めばスタイリングの完了である。