highlight.jsをローカルで実行してハイライトされたファイルを出力

ホームページやブログでプログラムのコードを掲載する際に、以下のようにコードをシンタックスハイライト(色付け)をすることがあると思います。

<canvas id="canvas" width="800px" height="600px" style="border:1px solid #000;background-color: #fffac;" ></canvas>

highlight.jsという便利なライブラリを使っていましたが、ページ表示時間のパフォーマンス向上のため、静的ホームページはgulpなどを使用し、ローカルで予め色づけした状態のhtmlを作成しようと思いました。(これからはamp html対応に向けて、JavaScriptはなるべく使用しない方針で作成したほうがいいかもしれません)

node.js

最初は以下のようにgulpのプラグインとして実行すると、色付けされた(色付けのclassを付与された)htmlを出力するような処理を実装しようとしました。

gulp.task('highlight', function(){
  return gulp.src('対象のファイル')
    .pipe(highlightjs())
    .pipe(gulp.dest('出力先'));
});

しかし、調べてみてもいいプラグインが見つからなかったので、別の方法を探すことにしました。

node.jsのライブラリが用意されていますので、これを使用しました。

$ npm install highlight.js

そして以下のようなfunctionを実行し、色付けclassが付与されたファイルを出力するようにしました。(gulppipeに組み込めるようにしたかったのですが、知識不足のためやり方がわかりませんでした...)

追記:pipeに独自のファンクションを組み込む方法がわかりましたので、gulpのpipeで独自のファンクションを実行するで紹介しています。

var fs = require('fs');
var hljs = require('highlight.js');

function highlight(file, type){
    var data = fs.readFileSync(file); //ファイルの内容を取得
    //highlight(言語パターン, 内容)でクラスを付与したデータを返します
    fs.writeFileSync('出力先', hljs.highlight(type, data.toString()).value);
  }
}

例えば上記のファイルに対してhighlightのファンクションを実行すると、以下のファイルが出力されます。

<span class="hljs-keyword">var</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'fs'</span>);
<span class="hljs-keyword">var</span> hljs = <span class="hljs-built_in">require</span>(<span class="hljs-string">'highlight.js'</span>);

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">highlight</span>(<span class="hljs-params">file, type</span>)</span>{
    <span class="hljs-keyword">var</span> data = fs.readFileSync(file); <span class="hljs-comment">//ファイルの内容を取得</span>
    <span class="hljs-comment">//highlight(言語パターン, 内容)でクラスを付与したデータを返します</span>
    fs.writeFileSync(<span class="hljs-string">'出力先'</span>, hljs.highlight(type, data.toString()).value);
  }
}

highlight.jsで色付けされるclassが付与されたhtmlとして出力されています。また、同時に<,>,&などはhtmlでそのまま表示できるようエンコードされます。

出力された内容を以下のような形でclass="hljs"を付与したタグで囲えば、シンタックスハイライト表示できるようになります。

<pre><code class="hljs">
<!-- ここに出力された内容をセット-->
`</pre>

classが付与されただけなので、以下のようにhighlight.jsで使用しているcssはこれまでどおり参照する必要があります。

<link rel="stylesheet" href="styles/default.css">

これでhighlight.jsに対応していない古いブラウザやJavaScriptがオフの環境でも、シンタックスハイライトをしたコードを表示できるようになりました。また、JavaScriptを実行しないので、画面ロードの時間も少しは短縮されると思います。


関連記事

  • watchifyとgulpで自動コンパイルと差分更新をおこなう

    今回は開発環境をさらに便利にするために、ファイルが変更されたら自動でビルドを実行し、ブラウザをリロードする処理を実装します。ファイルを変更すると自動でビルドが行われ、ブラウザが再読込されますが、ビルド...


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


  • highlight.jsをローカルで実行してハイライトされたファイルを出力

    ホームページやブログでプログラムのコードを掲載する際に、以下のようにコードをシンタックスハイライト(色付け)をすることがあると思います。highlight.jsという便利なライブラリを使っていましたが...