[Jekyll] ソースコードのハイライトをやってみた

Jekyll Jekyll

Nプログラマです。

今回はテンプレート内のソースコードをハイライトしてみました。
設定自体は簡単なのですが、CSSを生成しなければいけないというトコロでハマりました。
それも含めて備忘録に残していきます。

前提条件

コードハイライトの有効化

設定と記述は簡単なので先にしておきます。
後述のcssの生成が一手間かかります。

設定を追加

ハイライトにはJekyllに組み込まれているRougeを使います。

ハイライトの設定はデフォルトで有効になっていますが、今回は明示的に設定します。
_config.ymlに以下を追記します。

highlighter: rouge

ハイライトするコードをタグで囲む

使い方

highlightタグを使って表示したいソースコードを挟んで書きます。

{% highlight ハイライトする言語名 %}
ソースコード
{% endhighlight %}

具体的な使い方

今回はcssのコードを囲むので、ハイライトする言語名にcssを書いて、ソースコードをタグで囲んであげます。

 {% highlight css %}
 .sample-img {
   width: 100%
 }
 {% endhighlight %}

これで設定と記述は終了です。
次にハイライトするために必要なCSSを生成していきます。

ハイライト用CSSの準備(重要なトコロ)

これはRougeのrougifyというコマンドで生成が必要です。
この記事ではdockerを使っているのでdocker前提で進めます。

rougeはjekyll3系からバンドルされているようなので、docker内にコマンドがあるはずです。
なのでdocker内でcssを生成して、ホストOSのappディレクリに同期させてみます。

dockerに入る

環境構築の記事ではコンテナのサービス名がservice_jekyllになっているので、そのコンテナに入ります。

docker-compose exec service_jekyll sh

rougifyコマンドでハイライト用CSSを生成

rougifyコマンドはパスが通っていないので、フルパスで実行します。

コンテナが同期しているディレクトリを確認しておきます。

volumes:
  - ./app:/usr/src/app

docker内の/usr/src/appが同期対象になっているので、ここに生成されたCSSを出力すればホストOSにも出力されますね。

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

rougifyでハイライト用コードを出力するコマンドはこんな感じ。

使い方
rougify style ハイライト名

ハイライト名は色々あるのですが、今回はgithubにしてみました。
標準出力で表示されるので、リダイレクションを使いcssへ吐き出しています。

コマンドでcode-highlight.cssを生成
/usr/gem/bin/rougify style github > /usr/src/app/code-highlight.css

コマンド実行後code-highlight.cssがコンテナとホストOSに生成されているはずです。

他のハイライト名を使いたい場合は、helpコマンドを使うと一覧が表示されるのでそこから使いたいstyleを指定しましょう。

sytle一覧を出力
rougify help style

index.htmlにハイライトしたコードを表示する

これまでの設定と記述を使って、index.htmlにハイライトしたコードを表示してみます。

_config.yml

highlighter: rouge

index.html

head内に生成されたcssを読み込めるようにして、body内にhighlightタグを使ってソースコードを表示します。

---
---
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <link rel="stylesheet" href="code-highlight.css">
</head>
<body>
  <h1>index</h1>
  <h2>サンプルコード</h2>
    {% highlight css linenos %}
    .sample-img {
      width: 100%;
    }
    {% endhighlight %}
  </body>
</html>

結果

cap-01
ハイライトしたサンプル

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

highlightには行番号表示などオプションも指定できるみたいなので、そこも今後調べてまとめておきたいです。

おまけ: rougifyのコマンドを見つけるまで

CSSを生成する時にさらっとrougifyのコマンドを実行していますが、実際にはパスが通っておらず見つけるまで時間がかかりました。
ここはその過程になります。
興味が無い方は「おわりに」へどうぞ〜。

rougifyのパスを見つける

docker内でrougifyを実行するも、コマンドが見つかりませんというエラーが表示されてCSSが生成できない状態でした。

どうしたもんかと思い考えてみると、rougifyはgemからインストールされたものです。だったら、gemによりインストールされるコマンドのところにあるはずだと考えました。

gemには環境情報を表示してくれるコマンドがあるので、それを実行したら場所がわかりました。

環境情報を表示

gem environment

実行するとずらずらっと情報を表示されるので、それっぽい場所(binが入っているとか)を探します。

そうすると、それっぽいトコロが見つかりました。

EXECUTABLE DIRECTORY: /usr/gem/bin 

ここをlsコマンドで見てみると。。。

/srv/jekyll # ls /usr/gem/bin
commonmarker  htmlproofer   kramdown      nokogiri      redcloth      safe_yaml     sass-convert  sprockets
gemoji        jekyll        listen        rackup        rougify       sass          scss

おー!
rougifyコマンドあるじゃん!

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

というか、jekyllもあるのでそもそも使い始めてから実行パスくらい知っておきましょうよ、という話です。反省。。。

ともあれ、目的のコマンドrougifyが見つかり、無事にCSSを出力することができたのでした。

ただ、Jekyllで生成してくれる仕組みがある気がしてならない。。。
ゆっくり調べてみよう。

おわりに

今回は、テンプレート内のソースコードをハイライトするという内容でした。

カラーテーマが色々とあるので試してみるのもいいですね。
自分はgithubのハイライトに見慣れているので、他のハイライトに違和感を感じてしまいます。
慣れの問題でしょうね。

それでは、このへんで。
バイナリー!

参考

Jekyll

highlightタグの使い方

Tags Filters
All of the standard Liquid tags are supported. Jekyll has a few built in tags to help you build your site. You can also create your own tags using plugins.

highlighterのデフォルトがRougeになった情報

History
4.0.0 / 2019-08-19

Rouge

rouge-ruby/rouge
A pure Ruby code highlighter that is compatible with Pygments - rouge-ruby/rouge

Gem

gemのenvironmentコマンド

Command Reference - RubyGems Guides
タイトルとURLをコピーしました