動作が軽快なシンタックスハイライター「highlight.js」

  1. 公開日:2014/09/16
  2. 更新日:
  3. Web
  4. 0

ソースコードのシンタックスハイライトについては、様々なプラグインが用意されています。しかし、必要以上の内容が詰め込まれていたり、カスタマイズ性に欠けていたりと、なかなか自分に「ピッタリ」なものを見つけるのは難しいです。そこで、今回は、「必要なものだけを自分で最適化できて」「動作が軽快な」プロダクトをご紹介します。

必要最小限の機能に絞り込む事が可能な「highlight.js」

highlight.jsは、様々な言語に対応したシンタックスハイライト。既存のコードにスタイルシートとJavaScriptを埋め込むだけで使用することができます。特徴は、何と言っても対応している言語の多さとデフォルトで用意されている様々なスタイルシートです。

対応している言語は豊富ですが、全てを使用する必要は全くなく、自分にとって必要な言語に絞ってダウンロードすることもできるため、ソースコードが負担にならないのも良いところ。また、スタイルシートも同様で、自分のサイトのスタイルにあったものを使用すればよいので、ボトルネックになりそうな内容がふんだんに盛り込まれたJavaScriptやCSSに頭を悩ます必要もありません。

ダウンロード

highlight.jsのダウンロードは、Getting highlight.jsから行います。ダウンロード時に必要な言語に絞ってダウンロードができるため、ダウンロードしてから加工するといった操作も一切不要。スタイルシートは全てのセットがダウンロードされるため、好きなスタイルのみをロードするようにしましょう。

使用方法

ダウンロードしたファイルを読み込むだけです。ブラウザのレンダリングを考慮して、スタイルシートは<head>タグ内、JavaScriptは、</body>の直前で読み込むのが良いでしょう。WordPressを使用している場合は、get_template_directory_uri()関数を使用してテンプレートディレクトリの配下のファイルを読み込むようにしましょう。

ヘッダ(header.php)

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/theme.css">

フッタ(footer.php)

<script src="<?php echo get_template_directory_uri(); ?>/js/highlight.pack.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

本文

シンタックスハイライトを使いたいソースコードに対して、<pre><code class="xxxx"></code></pre>で囲みます。 「xxxx」には「xml」「php」などの言語が入ります。使用できる言語の名称は、CSS classes reference — highlight.js 8.1 documentationで確認できます。

<code>タグ内のHTMLのエンティティ文字列は、エンコードしておきましょう。エンコードされていない文字列( 例えば、<>)が含まれると、ただしくハイライトされませんので注意が必要です。例えば、<script>&lt;script&gt;にします。

しかし、毎回手動でエンコードするのは大変です。PopClipの拡張機能PopClip Extensionsから「HTML Encode」をダウンロードし有効にしておくと、

選択したエンティティ文字列だけをエンコードするといった使い方ができて非常に便利です。

Developer: Pilotmoon Software
Price: ¥1,200

PopClipを持ってない場合は?

HTMLのエンティティ文字列をエンコードしてくれる便利なWebサービスがありますのでそちらを使用するようにしましょう。

http://www.web2generators.com/html/entities

注意事項

JavaScriptは圧縮された状態でダウンロードされますが、スタイルシートは圧縮されていない状態です。必要に応じてスタイルシートは圧縮してしまいましょう。これらの圧縮については、初めてのgulp.js!MacでCSSファイル、JavaScriptの圧縮を行おうを参考にしてください。タスクランナーに登録しておくと作業が捗ります。

この記事が気に入ったらいいねしよう!
関連記事
ご意見ボード
匿名で管理人に送信されます。※送信専用です。返信はできません。
ご指摘・ご意見
Top