Turn on syntax highlighting in Jekyll Bootstrap via pigments

05 October 2014

Language Select:

はじめに

ちゃんとした？コードだったらGistを使ったほうが手っ取り早いのかも知れませんが。ちょっとしたコードを記事中に貼り付ける際に、シンタックスハイライトを行いたいので、その方法を。

シンタックスハイライトはpygmentsを使えばいいそうです。

最近のJekyll-Bootstrapだとすでに、_config.ymlの中にhighlighter: pygmentsの記述があるかと思います。以前のものだとpygments: trueみたいな記述のようですが。

GitHubにはpygmentsは既に入っているみたいなので、テーマのhtmlファイルの中でcssを読み込む記述さえ入れておけば良い。

テーマ’twitter’ならば、_includes/themes/twitterのdefault.htmlの中に

<link href="{{ ASSET_PATH }}/css/syntax.css?body=1" rel="stylesheet" type="text/css" media="all">

を追加しておく。そして当然css実物も必要ですので、

assets/themes/twitter/cssの中にsyntax.cssを追加しておく。

記事中に貼り付ける際には、{% highlight ruby linenos%}と{% endhighlight %}で囲んでコードを記述すると、以下のように色分けされて表示されます。

1 def foo
2   puts 'foo'
3 end

余談ですが、jekyllの括弧のエスケープにはまっていました。