[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というコマンドで生成する必要があります。

なプ

この記事ではdockerを使っているのでコンテナに入って作ります。

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にも出力されます。

なプ

それではCSSを生成してみます。

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>

結果

/img/article/2019/02/13/01.png
結果

ソースコードがハイライトされていますね。

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コマンドあるじゃん!

ここにパスを通すか、コマンド実行時にフルパスで指定してあげればコマンドを実行できます。

そもそも使い初めてから随分と時間が立っているので、実行パスくらい知っておかないとな、、、とちょっと反省しました。

なプ

jekyllコマンドもここにありますし、、、

ともあれ、目的のコマンド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コマンド

\ ちょっとお買い物 /


関連した記事