自動でエスケープもしてくれるコードハイライター「SyntaxHighlighter Evolved」の紹介

ブログでコードを書くときに、コードハイライターが欲しくて調べてみました。
導入することに決めたのは、「SyntaxHighlighter Evolved」。

コードハイライターとは

コードハイライターとは、その名の通り記述したコードをハイライトしてくれるスクリプト類のこと。
シンタックスハイライターとも呼ぶみたいですが、今回紹介するプラグイン名と紛らわしいので以下「コードハイライター」とします。
シンタックスは構文、ハイライトは強調表示、といった意味合いですね。

使用するコードハイライターの選択

通常コードハイライターはJavaScriptファイル等で構成されており、それらをページに読み込むことで指定した範囲をハイライトできるようになります。
WordPressでは、直接コードハイライターを設置し読み込ませるのではなく、プラグインで設定することも可能です。

よく使用されているコードハイライター

コードハイライターにはいくつか種類があり、以下のようなものが有名です。

  • highlight.js
  • Google Code Prettify
  • Crayon Syntax Highlighter
  • SyntaxHighlighter

それぞれ一長一短ありますが、多機能であるほど重い傾向にあります。
以下、簡単に紹介をします。

highlight.jsは、非常に軽快なコードハイライターです。しかし、行数表示等の機能はありません。
Google Code Prettifyは同様に軽量で、行数の表示も可能です。
動作・表示の軽快さを第一とするなら、このどちらかが良さそうです。

しかし、これら二つには、エスケープを自動で行う機能がありません。
つまり、HTMLタグの「<」などを表示させる際に、「&lt;」と記述しなくてはなりません。
エスケープの置換を自動で行うことのできるウェブサービスなどはありますが、毎回そのようなツールを使用する、または直接エスケープ処理をするとなると少し面倒です。

一方、Crayon Syntax HighlighterとSyntaxHighlighterは、コードのエスケープを自動でしてくれます。

これら二つのコードハイライターは、どちらも多機能です。
Crayon Syntax HighlighterはWordPressプラグインで、設置・設定の容易さと機能の豊富さから利用者は多いようです。しかし、表示速度に悪影響を及ぼすほど重いという評判で、今回は採用を見送りました。
この記事でおすすめするプラグイン「SyntaxHighlighter Evolved」はSyntaxHighlighterをWordPressプラグインにしたものです。

なぜプラグインを使うのか

プラグインのメリットは、設定が容易なこと。デメリットは、直接設置するよりも重くなりがちなこと。
ブログやサイトの運営は年単位で続くこともあり、私は「あれってどうやったっけ?」「このファイルはなんだっけ?」となりがちです。
そのため、後々乗り換えや停止・削除する可能性のある機能については、管理の容易さを優先しプラグインを使用することにしました。
一方で、他のCMSへの移行なども考慮する必要のある方は、プラグインではなく直接設置したほうがよいかもしれません。

SyntaxHighlighter Evolved の使い方

使い方は非常に簡単。

  1. プラグインをインストールし有効化
  2. 設定を好みに合わせ変更
  3. ハイライトしたいコードを指定のショートコードで囲む

設定画面は日本語化されており、デザインや行数表示・タイトル表示などを変更することができます。

ショートコードの使い方

ハイライトさせる言語によって記述が異なります。
以下の二種類の記述方法があります。

  1. langまたはlanguageでパラメータを指定する
    • [code lang=”html”]ここにコードを記述[/code]
    • [code language=”html”]ここにコードを記述[/code]
  2. 言語名でショートコードを使用する
    • [html]ここにコードを記述[/html]

表示は設定のほか、ショートコードで指定するパラメータによっても変更することができます。

以上、SyntaxHighlighter Evolvedの紹介でした!