Shallow Dive by Dozono

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タグ内のLANGOPTIONは以下のページを参考に値を設定する

スタイリング

前述の通り、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で読み込めばスタイリングの完了である。