MENU

Loading...

軽量で多言語なコードハイライトhighlight.jsの使い方

ブログにソースコードを掲載する際に、ライブラリ等を用いて見やすくハイライトさせることが多いかと思いますが、その動作を重いと感じたことはありませんでしょうか?

今回は数あるライブラリの中でも、軽量かつjQueryに依存しないhighlight.jsを当ブログに導入しましたので、使い方をご紹介したいと思います。

highlight.jsとは

highlight.jsとはその名の通りソースコードを見やすくハイライトしてくれるjavascriptのライブラリです。具体的には以下のような表示を実現できます。

<main>
<h1>title</h1>
<section>
<h2>subtitle</h2>
</section>
</main>

導入手順

ライブラリの読み込み

ライブラリの入手方法は複数用意されていますが、今回は一番手軽なCDN※1から読み込む方法で行います。以下のソースを<head>内あるいは</body>の直上に記述します。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>

または下記でも可。

<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.8.0/styles/default.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/8.8.0/highlight.min.js"></script>

続いて読み込んだライブラリを実行するスクリプトを記述します。下記のソースをコピーし、ライブラリを読み込んだ直後に記述します。

<script>
hljs.initHighlightingOnLoad();
</script>

これで準備は完了です。あとは実際にコードを書いてみます。

コードの記述

<pre><code>...;</code></pre>でソースを囲むことでタグ内のコードがハイライトされます。

function test() {
  var elem = document.getElementById('test');
  alert(elem);
}

ハイライトする言語を明示的に指定したい場合は<code>タグにclassを付与します。javascriptなら以下のようになります。

<pre><code class="js">/* ここにソースコードを記述 */</code></pre>

付与するclassの対応表は以下から確認できます。

コードを記述する際の注意点

<pre><code>の後に改行を入れてしまうと、余計な空白が出来てしまいますので、改行なしで記述してください。

カスタマイズ

デザインテーマ

highlight.jsではハイライト用のデザインテーマが多数用意されています。下記公式サイトの左ナビの「Styles」より好みのデザインを選ぶことができます。

デザインが決まったら、下記より選択したデザインと同名のcssを見つけて、読み込むcssを変更します。

例えば「hybrid」というテーマを選択した場合、読み込むcssは下記になります。

cdnjsを使用した場合

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/hybrid.min.css">

おわり

軽量で対応言語も多いので余計な機能は不要で単純にハイライトさせたいと言う方にはおすすめです。