JavaScript ベースのシンタックスハイライター Syntaxhighlighter モジュールをインストールしてみた

Posted by 宮部敏史 on 2013-07-19 11:43:25

先日 GeSHi Filter モジュールを導入したばかりなのだが、JavaScript ベースの Syntaxhighlighter モジュールを導入してみた。コンピュータ技術者というものは、色々と試し、自分が使いやすいと思うものを探し出し、できることならとことんまでカスタマイズする職業である。複数のモジュールを試してみて、どちらが良いかを判断してみようと思う。

両者の違い

前回の GeSHi Filter モジュール と今回の Syntaxhighlighter モジュール の違いなのだが、サーバ上で動作するか、ブラウザ上で動作するかの違いである。とはいうものの、毎回 HTML ファイルを生成するたびに変換するのであれば大きな違いになるのだが、このサイトは Drupal のキャッシュを使っているため、サーバの負荷はあまり関係がない。

もう一点の違いは、GeSHi フィターの場合は装飾用の HTML タグがたくさんついてしまうが、 Syntaxhighligter は装飾用の HTML タグが一切付かない事。特に行番号を付けた場合に大きな差が出る。GeSHi フィルターの場合は行番号までが HTML に含まれてしまっているが、Syntaxhighligter の場合は行番号が HTML に含まれない。そのため、GeSHi フィルターの場合は、ソースコードをコピーした時に行番号がコピーされてしまうのだ。

インストール

Syntaxhighlighter モジュールをダウンロードし、サードパーティ用のモジュールディレクトリ( sites/all/modules ) に展開する。モジュール一覧ページで Syntaxhighligter モジュールを有効にする。

有効にした後、下記メッセージが表示されたことだろう。別途 Syntaxhighlighter ライブラリをダウンロードしてきてインストールしなければならないようだ。

The required Syntax highlighter javascript library is not installed. See the Syntaxhighlighter module README.txt file for instructions. (Currently using Syntax highlighter js library Not installed)

Syntaxhighlighter モジュールの README.txt ファイルに従い、 http://alexgorbatchev.com/SyntaxHighlighter/download/ から最新のライブラリをダウンロードする。ダウンロードしたファイルをサードパーティ製ライブラリディレクトリ( sites/all/libraries ) に展開する。そして、再度 Syntaxhighlighter モジュールを有効にする。すると、以下のメッセージが表示される。

You must turn on the Syntaxhighlighter filter in an input format to syntax highlight code using that format. Then configure the Syntax Highlighter module. See the Syntaxhighlighter module README.txt file for instructions.
The configuration options have been saved.

このメッセージが表示されればインストールは成功。

設定

設定画面は admin/config/content/syntaxhighlighter にある。 Enabled languages で言語を指定できるので、利用したい言語 cpp(C++) や Ruby, Python などを追加する。このサイトでは、bash, css, sql, xml を追加している。

Theme, Tag name はそのままで良いだろう。最後のデフォルトパラメータの設定 Default expressions だが、URL を自動でリンクに置き換えないようにしたかったのと、ツールバーを消したかったので、下記の設定を行った:

SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;

次に、入力フィルターの管理画面 ( admin/config/content/formats ) で Syntaxhighlighter を有効にする。

README.txt にも書かれているように、 Limit allowed HTML tags の後、 Convert line breaks into HTML の前に指定する必要がある。私の環境では、 Markdown filter を用いているので、 Syntaxhighlighter の後に Markdown filter を使っている。

ちなみに以下の順である

Syntax highlighter
Markdown
Convert URLs into links

実際に使ってみる

先日の GeSHi Filter エントリで使ったサンプルを(少しだけ変更したけれど)使ってみよう:

<pre class="brush: php">
&lt;?php
function hogehoge_fugafuga() {
    global $user;

    if ($user-&gt;uid == 1) {
        echo "管理者です";
    }
</pre>

すると以下のように変換される。

<?php
function hogehoge_fugafuga() {
    global $user;

    if ($user->uid == 1) {
        echo "管理者です";
    }

感想

意外と簡単に導入できてしまった。先程も書いたように、行番号がコピーされないのは、結構便利だと思う。テキストエディタに貼り付けて、行番号を消す作業が不要になる。また、どうでも良さそうな好みの問題なのだろうけど、デフォルトの設定で Syntaxhighlighter のほうが色が見やすいと思った。読みやすさというのは大事なことである。

さっそく、GeSHi Filter モジュールは外してしまって、Syntaxhighlighter のほうを有効に設定した。

今回は php で使用したのだが、 <?php をわざわざ文字参照の <?php と書き換えなければならないのはめんどくさかったりする。これは簡単なフィルタで置き換えられるだろうからそのうちやってみよう。