テンプレートエンジンの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">&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>。`</pre>

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

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


関連記事

  • Front Matterでファイルごとに変数を持たせる

    Front Matterを使えば、各ファイルに変数を定義して簡単に扱えるようになります。各ページの先頭に以下のように---で囲って情報を定義します。content.attributesでFront M...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksはとても便利なのです。extendsという機能を使えば、ヘッダやフッタの共通部分を作成しておき(ベースとなるファイル)、各ページではページごとに変...


  • gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法

    Nunjucksをgulpでコンパイルする方法を紹介します。今回はgulp-nunjucks-renderを使用します。まずは、コマンドラインでgulp-nunjucks-renderをインストールし...


  • Nunjucksで独自のファンクションを実行する

    gulp-dataと組み合わせると、引数のような形で各ファイルにデータ(変数など)を渡すことができます。同じ容量で、変数ではなくファンクション自体をgulp-dataで設定すると、自分で定義したファン...


  • テンプレートエンジンのnunjucksとhighlight.js組み合わせる

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


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • less|cssに変数を使い実装を効率化する方法

    lessには変数を使うだけでなく、変数の色をX%明るくしたり、暗くしたり、透過したり、といった便利な関数も用意されています。また、要素を入れ子にして設定したり、関数を自作できるなど、とても便利な機能が...


  • gulpでディレクトリ構造を維持したままdestにコピーする

    gulpで以下のようなフォルダ構成で、page.html、page2.htmlをそれぞれのフォルダ配下のフォルダにコピーする場合、普通にdestを指定するだけではうまくいかないことがあります。コピーす...


  • gulpの便利なおすすめプラグイン

    gulpを導入するとWEB開発をとても効率よく簡単に行うことができるようになります。私がよく利用している便利なプラグインを紹介します。


  • npmのpackage.jsonを最新のバージョンに更新する

    package.jsonのパッケージを最新のバージョンに更新する方法を紹介します。最新のバージョンに更新するためには、package.jsonに記載されているパッケージのバージョンの記載を最新にする必...