テンプレートエンジンの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 + '`</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"><<span class="hljs-name">span</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:red;"</span>></span>赤い<span class="hljs-tag"></<span class="hljs-name">span</span>></span>。`</pre>自動でエスケープもしてくれます。これでとても簡単にコードをハイライトできるようになりました。
nunjucksは日本語の資料があまりないので、日本ではあまり普及していないのかもしれませんが、上記のようにフィルターブロックを使えたりと、とても便利な機能がたくさんあるので、テンプレートエンジンの中では一番のお気に入りです。