[Jekyll] Jekyllでソースコードのハイライトをやってみた
Nプログラマ(@Nprog128)です。
Jekyllを使ってテンプレート内に記述するソースコードをハイライトをしてみました。
設定自体は簡単なのですが、ハイライト用のCSSを生成するトコロでハマりました。
それも含めてメモリアとして残しておきます。
事前の準備
Jekyllの環境が必要なので予め構築する必要があります。
DockerでJekyllの環境を構築した記事は コチラ になります。
コードハイライトの有効化
設定と記述は簡単なので先にチョイチョイっと書いておきます。
後述のハイライト用cssの生成が一手間かかります。
設定を追加
テンプレート内に記述するソースコードをハイライトするには、Jekyllに組み込まれているRougeを使います。
ハイライトの設定はデフォルトで有効になっていますが、今回は明示的に設定します。
_config.ymlに以下を追記します。
1highlighter: rouge
これで準備は完了です。
ハイライトするコードをタグで囲む
使い方
highlightタグを使って表示したいソースコードを挟んで書きます。
1{% highlight ハイライトする言語名 %}
2ソースコード
3{% endhighlight %}
具体的な使い方
今回はcssのコードをハイライトしてみます。
ハイライトする言語名にcssを指定して、ソースコードをタグで囲んであげます。
1 {% highlight css %}
2 .sample-img {
3 width: 100%
4 }
5 {% endhighlight %}
これで設定と記述は終了です。
このままではハイライトされていない状態で表示されます。
なので、ハイライトするために必要なCSSを生成していきます。
ハイライト用CSSの準備 （重要）
ハイライト用のCSSは、Rougeのrougifyというコマンドで生成する必要があります。
rougeはjekyll3系からバンドルされているようなので、docker内にコマンドがあるはずです。
なのでdocker内でcssを生成して、ホストOSのappディレクリに同期させてみます。
dockerに入る
環境構築の記事ではコンテナのサービス名がservice_jekyllになっているので、そのコンテナに入ります。
1docker-compose exec service_jekyll sh
rougifyコマンドでハイライト用CSSを生成
rougifyコマンドはパスが通っていないので、フルパスで実行します。
コンテナが同期しているディレクトリを確認しておきます。
1volumes:
2 - ./app:/usr/src/app
docker内の/usr/src/appが同期対象になっているので、ここに生成されたCSSを出力すればホストOSにも出力されます。
rougifyでハイライト用コードを出力するコマンドはこんな感じになります。
1rougify style ハイライト名
ハイライト名は色々あるのですが、今回はgithubにしてみました。
標準出力で表示されるので、リダイレクションを使いcssへ吐き出しています。
今回はcode-highlight.cssというファイル名で出力してみます。
1/usr/gem/bin/rougify style github > /usr/src/app/code-highlight.css
コマンド実行後、code-highlight.cssがコンテナとホストOSの両方に生成されているはずです。
他のハイライト名を使いたい場合は、helpコマンドを使うと一覧が表示されるのでそこから使いたいstyleを指定しましょう。
style一覧を出力するコマンドは以下のようになります。
1rougify help style
index.htmlにハイライトしたコードを表示する
ハイライトするための準備が整いました。
これまでに準備したものを使って、index.htmlにハイライトしたコードを表示してみます。
_config.yml
1highlighter: rouge
index.html
head内に先程routifyコマンドで生成されたcssを読み込めるようにして、body内にhighlightタグを使ってcssのソースコードを表示します。
1---
2---
3<!DOCTYPE html>
4<html lang="ja">
5<head>
6 <meta charset="UTF-8">
7 <title>タイトル</title>
8 <link rel="stylesheet" href="code-highlight.css">
9</head>
10<body>
11 <h1>index</h1>
12 <h2>サンプルコード</h2>
13 {% highlight css linenos %}
14 .sample-img {
15 width: 100%;
16 }
17 {% endhighlight %}
18 </body>
19</html>
結果
ソースコードがハイライトされていますね。
highlightには行番号表示などオプションも指定できるみたいなので、そこも今後調べてまとめておきたいです。
おまけ: rougifyのコマンドを見つけるまで
CSSを生成する時にさらりとrougifyのコマンドを実行していますが、実際にはパスが通っておらず見つけるまで時間がかかりました。
ここはその過程のメモ書きとなります。
rougifyのパスを見つける
docker内でrougifyを実行するも、コマンドが見つかりませんというエラーが表示されてCSSが生成できない状態でした。
どうしたものかと思い考えてみると、rougifyはgemからインストールされたものです。
だったら、gemによりインストールされるコマンドのところにあるはずだ、と考えました。
gemには環境情報を表示してくれるコマンドがあるので、それを実行したらそれっぽい場所が表示されました。
1gem environment
実行するとずらずらっと情報を表示されるので、それっぽい場所（binが入っているとか）を探します。
1EXECUTABLE DIRECTORY: /usr/gem/bin
ここをlsコマンドで見てみると。。。
1/srv/jekyll # ls /usr/gem/bin
2commonmarker htmlproofer kramdown nokogiri redcloth safe_yaml sass-convert sprockets
3gemoji jekyll listen rackup rougify sass scss
ここにパスを通すか、コマンド実行時にフルパスで指定してあげればコマンドを実行できます。
そもそも使い初めてから随分と時間が立っているので、実行パスくらい知っておかないとな、、、とちょっと反省しました。
ともあれ、目的のコマンドrougifyが見つかり、無事にCSSを出力することができたのでした。
ただ、dockerのお作法（もしかするとdocker-composeの設定ファイル）でもっと簡単に生成できる方法がある気がしてならない、、、
おわりに
今回は、Jekyllのテンプレート内に記述したソースコードをハイライトする、という内容でした。
ハイライトするためのカラーテーマが色々とあるので、自分の好みに合ったもの探してみるのもいいですね。
自分はgithubのハイライトに見慣れているので、他のハイライトにちょっと違和感を感じてしまいます。
それでは、このへんで。
バイナリー！
参考
Jekyll
Tags Filters | Jekyll • Simple, blog-aware, static sites
ハイライトタグの使い方
History | Jekyll • Simple, blog-aware, static sites
highlighterのデフォルトがRougeになった情報
Rouge
GitHub - rouge-ruby/rouge: A pure Ruby code highlighter that is compatible with Pygments
Gem
Command Reference - RubyGems Guides
gemのenvironmentコマンド
