ソースコードをハイライトする軽量ライブラリ、Highlight.jsの使い方

更新日: 2015/09/02 [更新履歴]
公開日: 2014/11/15

プログラムの解説記事を作るとき、ユーザーが見やすいように、ソースコードをハイライトする(色を付ける)には、基本的にはJavaScriptのライブラリを利用します。種類はいくつかありますが、今回はこのブログでも採用している超軽量ライブラリのHighlight.jsの使い方を解説します。

highlight.js - Syntax highlighting for the Web: Highlight.jsの公式ウェブサイト。ライブラリ、テーマファイルのダウンロード、公式ドキュメントなど。

Highlight.jsとは？

Highlight.jsとは、シンタックスハイライトを実現するJavaScript(jQueryは不要)のライブラリです。要は、ソースコードに色を付けてくれるライブラリですね。下記はこのライブラリを使って、ソースコードをハイライトしたサンプルデモです。「Tomorrow Night Eighties」というデザインテーマによる色付けですが、他にも約50ものテーマが用意されていて、好みのものを選択することができます。

PHP

<?php
	require_once "./Syncer.php";

HTML

<p>テキストを<strong>強調</strong>します。</p>

JavaScript

var num = 15 ;
alert( num ) ;

CSS

.header
{
	color: #D36015 ;
}

機能について

上記図は、Highlight.jsが対応している言語の一覧です。2014年11月現在、基本的な言語をはじめ、マイナーなものを含めて、104もの言語に対応しています。

良い点

Highlight.jsのメリットは、jQueryに依存せず、さらに開発者にとって必要な言語の分だけコードを削ってダウンロードできるため、動作が速いことです。他のライブラリと厳密なデータで比較したわけではありませんが、この記事のサンプルを再読み込みなどで確認していただければ、体感できるはずです。

悪い点

デメリットは、有名ライブラリであるSyntaxHighlighterほど多機能じゃないことです。例えば行番号を表示する機能、行を指定してハイライトする機能は備わっていません。この点について開発者は、「そもそもその機能は必要なのだろうか」という考えのようです。ソースコードの中でコメントを付けたり、該当部分だけを抜き出してコードを表示すればいいということですね。私は「冗長な機能で処理を重くしない」という点で、この考え方に賛成です。

Many highlighters, in my opinion, are overdoing it with such things as separate colors for every single type of lexemes, striped backgrounds, fancy buttons around code blocks and — yes — line numbers. The more fancy stuff resides around the code the more it distracts a reader from understanding it.

『Line numbers』より引用

ライブラリの入手

ライブラリの導入方法を説明します。highlight.jsは、記事冒頭で紹介した、公式サイトで入手することができます。ダウンロードの手順を解説します。まずは公式サイトにアクセスして下さい。

公式サイトにアクセスしたら、右側にある「GET Version ...」をクリックして下さい。

ダウンロードのページに移動します。将来的に記事で紹介する予定の言語を選択して、「download」のボタンをクリックして下さい。後になって、この言語も紹介したいとなった場合は、単純にライブラリをダウンロードし直して更新すれば大丈夫です。

ダウンロードしたファイル(highlight.zip)を解凍して下さい。様々なファイルがありますが、利用するのは2つだけです。1つはhighlight.pack.jsで、これはソースコードをSyntax HighlightするためのJavaScriptライブラリです。もう1つはstylesフォルダに入っている.cssファイルです。利用したいテーマファイルを1つだけ、スタイルシートとして読み込みましょう。今回はサンプルとしてTomorrow Nightというテーマを利用するので、tomorrow-night.cssを利用します。

highlight.zip

highlight
- highlight.pack.js
- styles
  - tomorrow-night.css

プログラミング

早速、Highlight.jsを使って、ソースコードをハイライトしてみましょう。まずは、HTMLのヘッダー内でJavaScriptとスタイルシートを読み込んでおきます。

HTML

<head>
	<link rel="stylesheet" href="./tomorrow-night.css">
	<script src="./highlight.pack.js"></script>
</head>

続いて、ボディ部分に、ハイライトしたいコードを記述します。デフォルトでは、<pre><code>...</code></pre>内にコードを記述する形になります。コード部分はHTMLエスケープしておきましょう。先頭の改行は改行として認識されますが、後尾の改行は自動的に削られます。なので、先頭(<code>の直後)には改行を入れないようにしましょう。

HTML

<pre><code>&lt;?php
	$text = &quot;Hello World!!&quot; ;
	echo $text ;
</code></pre>

仕上げに、JavaScriptで、「ハイライトをして下さい」という命令を記述します。これは決まり事だと思って下さい。記事ごとにこの命令を記述するのが面倒な場合は、highlight.pack.jsの一番最後の行に記述しておくという方法もあります。

JavaScript

hljs.initHighlightingOnLoad() ;

以上、準備ができたら、HTMLファイルを読み込んでみて下さい。ソースコードがハイライトされているはずです。デモを確認したい人は下記からどうぞ。

サンプルデモを見る

カスタマイズ

基本的な使い方が分かったら、自分のサイトに合うように、カスタマイズをしていきましょう。

言語を指定する

highlight.jsは基本的に、コードを自動で分析し、最適の言語に準じたハイライトをしてくれます。マニュアルで言語を指定したい場合は、下記のように、囲みタグに、言語に応じたクラス属性値を付与して下さい。例えば、HTML言語でハイライトしてほしい場合は次の通りです。

HTML

<pre><code class="html">&lt;?pre
	$text = &quot;Hello World!!&quot;;
	echo $text;
</code></pre>

例えば、HTMLならhtml、スタイルシートならcssといったように、大体は直感的に思い付く名前になっていますが、確認したい人は公式リファレンスを参照して下さい。例えば、図はMarkdownの説明です。Markdownの場合、markdown、md、mkdown、mkdのいずれかのクラス属性値を付けることで指定できるようです。

CSS classes reference: highlight.jsのデザインを調整するための、スタイルシートのセレクタ一覧です。言語は、このページを参考にクラス属性値を指定します。

主な言語のクラス名一覧

公式ドキュメントを参考に、主な言語のクラス名をまとめてみました。言語名をクリックすると、どのようにハイライトされるか、サンプルを確認することができます。

言語	クラス名
Apache	apache、apacheconf
CSS	css
Bash	bash、sh、zsh
C#	cs、csharp
C++	cpp、c、cc、h、c++、h++、hpp
CoffeeScript	coffeescript、coffee、cson、iced
Diff	diff、patch
HTML, XML	xml、html、xhtml、rss、atom、xsl、plist
HTTP	http、https
Ini	ini
JSON	json
Java	java、jsp
JavaScript	javascript、js
Makefile	makefile、mk、mak
Markdown	markdown、md、mkdown、mkd
Nginx	nginx、nginxconf
Objective C	objectivec、mm、objc、obj-c
PHP	php、php3、php4、php5、php6
Perl	perl、pl
Python	python、py、gyp
Ruby	ruby、rb、gemspec、podspec、thor、irb
SQL	sql

ハイライトを拒否する

中にはハイライトしてほしくないコードも存在すると思います。そんな時は、コードを囲む要素にnohighlightというクラス属性値を付けることで、そのコードだけハイライトの対象外にできます。

HTML

<pre><code class="nohighlight">&lt;?pre
	$text = &quot;Hello World!!&quot;;
	echo $text;
</code></pre>

タブスペースを調整する

デフォルトでは、タブは4文字分の半角スペースとして変換されます。これを変更するには、プログラムを実行する前に下記の通り設定して下さい。

JavaScript

// タブスペースの調整
hljs.configure( {
	tabReplace: "    ",	// 4文字分の半角スペース
} ) ;

// プログラムの実行
hljs.initHighlightingOnLoad() ;

囲みタグを調整する

デフォルトでは、ハイライトの対象になるのは<pre><code>...</code></pre>で囲まれた部分のコードですが、この囲みタグを変更することができます。これには、jQueryライブラリが必要です。あらかじめ読み込んで下さい。

例えば、「highlightjsというクラス属性値が付いたラッパー内」という条件にする方法を紹介します。下記がそのサンプルです。

HTML

<pre class="highlightjs">&lt;?pre
	$text = &quot;Hello World!!&quot;;
	echo $text;
</pre>

それには、デフォルトの実行方法を削除して下さい。

JavaScript

// デフォルトの命令を削除
// hljs.initHighlightingOnLoad();

続いて、代わりの起動用コードを記述して下さい。JavaScript版とjQuery版の2種類を用意しました。

JavaScript

// [.highlightjs]で囲まれた中だけをハイライトする
var elms = document.getElementsByClassName( 'highlightjs' ) ;

for( var i=0 , l=elms.length ; l>i ; i++ )
{
	// Highlight.jsの起動
	hljs.highlightBlock( elms[i] ) ;
}

jQuery

// [.highlightjs]で囲まれた中だけをハイライトする (jQueryの場合)
$(function()
{
	$( '.highlightjs' ).each(function( i , block )
	{
		hljs.highlightBlock( block ) ;
	} ) ;
} ) ;