omachizura

仕事メモ、役に立ったスキルをまとめています。


nunjucksとhighlight.js組み合わせる

便利なテンプレートエンジンのnunjucksのテンプレートの中で、コードをシンタックスハイライト(色付け)する便利なライブラリのhighlight.jsを組み込む方法を紹介します。

nunjucksのコンパイルはgulpを使用しています。gulpを使ったコンパイル方法は gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法 で紹介しています。

また、ローカルでhighlight.jsでハイライトする方法は highlight.jsをローカルで実行してハイライトされたファイルを出力 で紹介していますので予備知識として目を通していただくと理解しやすいかと思います。

filter

highlight.jsでハイライトするフィルターを独自に定義します。gulpfile.jsに以下のように定義します。

var gulp = require('gulp');
var nunjucksRender = require('gulp-nunjucks-render');
var hljs = require('highlight.js');

gulp.task('nunjucks', function () {
  var manageEnvironment = function(env) {
    //独自のフィルターを定義します
    //str:ハイライトする文字列 type:ハイライトする言語
    env.addFilter('highlight', function(str, type) {
      return '<pre><code class="hljs">' + hljs.highlight(type, code).value + '</code></pre>';
    });
  };
  var option = {
    envOptions: {
      //一応自動でエスケープをしないように設定します
      autoescape: false
    },
    manageEnv: manageEnvironment,
  };
  return gulp.src(src)
    .pipe(nunjucksRender(option))
    .pipe(gulp.dest(dest));
});

あとは、nunjucksのテンプレートファイルでハイライトしたいコードをフィルターブロックで囲めば、コンパイルするとハイライトしてくれます。

フィルターブロックで囲った文字列が第一引数に入ります。filterのファインクションを定義する際の引数にはハイライトしたい言語タイプを設定します。

コンパイル前

{% filter highlight('html') %}
トマトは<span style="color:red;">赤い</span>。
{% endfilter %}

コンパイル後

<pre><code class="hljs">トマトは<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:red;"</span>&gt;</span>赤い<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></code></pre>

自動でエスケープもしてくれます。これでとても簡単にコードをハイライトできるようになりました。

nunjucksは日本語の資料があまりないので、日本ではあまり普及していないのかもしれませんが、上記のようにフィルターブロックを使えたりと、とても便利な機能がたくさんあるので、テンプレートエンジンの中では一番のお気に入りです。