Joomla向けソースコード表示プラグインについて

• 
• 

詳細

2012年1月01日（日曜）16:01に公開

作者: 佐藤英人

前の記事（「SyntaxHighlighterをJoomlaのWYSIWYGエディタで」）で述べましたように、JoomlaでHTMLタグを含むコードの表示を行うのは結構面倒です。それを簡単にしてくれるプラグインとして、Code Citation（1.3.1）とCode Highlighter（1.4）の２つを取り上げ、それぞれの長所と欠点、それらの組み合わせについて、私の経験をご紹介します。

Code CitationとCode HighlighterはいずれもSyntaxHighlighterを利用してコード表示を行うプラグインです。SyntaxHighlighterを利用するプラグインにはこの２つ以外に多数のものがありますが、HTMLタグ表示のための工夫が施されているものは、私が調べた限り、この２つしかありませんでした。なお、Joomla 1.5で使用するときは、これらを利用しても前の記事で述べた問題が発生します。そこでJoomla 1.5で使用するときは、前の記事でご紹介した修正用プラグイン（Encode Ampersand）も合わせて利用するという前提でお話しします。

本稿では前の記事で使ったものと同じ以下のコード表示を例題として使用することにします。

<script type="text/javascript">
function display() {
    var nameArray = new Array();
    nameArray[0] = "yama";
    nameArray[1] = "kawa";
    var text = "";
    for (var i=0; i<nameArray.length; i++) {
        text += nameArray[i] + "\n";
    }
    document.f1.nameList.value = text;
}
</script>
 
<form name="f1">
    <input type="button" value="実行" onclick="display()" /><br />結果
    <textarea type="text" name="nameList" rows="3" cols="30"></textarea>
</form>

1. Code Citationの長所と欠点

Code Citationは、エディタのWYSIWYG画面での入力に適したプラグインです。これを利用した例題の入力画面は以下のようになります。

表示するコードは以下のように、{ } のタグでくくって書きます。これはHTMLタグではありませんので、WYSIWYG画面に表示され、そこで手直しすることができます。

｛codecitation class="brush: ...."｝ ..サンプルコード.. ｛/codecitation｝

HTML画面で同じ部分をみると以下のようになっています。

改行の<br />が挿入され、空白は&nbsp;に置きかえられています。コード内のHTMLタグは&lt;tag&lg;にエンコードされています。これらのおかげでHTMLタグとプログラムのインデント構造を正しく表示できる訳です。ただし、タブ (\t) は無視されます。このためタブを使ってインデントしているプログラムは事前に半角の空白に置きかえる前処理が必要になります。

Code Citationの長所と欠点をまとめると以下のようになります。

長所

1. WYSIWYG画面でコード表示部分をそのまま見ることができ、ここで編集できる。
2. HTMLタグを表示できる。
3. インデント構造を表示できる。
4. 長い行を折り返したとき、折り返しマークの表示と２行目以降のインデントをしてくれる。
5. フロント画面でコード表示部分に枠がつくので、１行しかないときもコードであると判別しやすい。

欠点

1. HTML画面ではべた書きになり、内容確認や編集は難しい。
     この状態でDBに保存されますので、CodeCitation以外のSyntaxHighlighter系プラグインに乗り換えることが難しいと思われます。
2. タブでインデントされたプログラムでは前処理が必要である。

2. Code Highlighterの長所と欠点

もう一つのプラグインCode Highlighterの場合を見てみましょう。こちらは、エディタのHTML画面での入力に適したプラグインです。ただし、Joomla 1.6, 1.7ではいまのところ、Code Highlighter ボタンでの入力がHTML画面では働きません。WYSIWYG画面でボタンを使ってコードを入力し、HTML画面でhtml-script:trueなどのオプションを設定するという使い方になります。

例題のHTML入力画面は以下のようになります。なお、Code Highlighterでは、使用するSyntaxHighlighterのバージョンとして、V2とV3のどちらかをオプションで選択することができます。V3では、長い行の折り返しが働きません。そこで、ここではV2を選択しています。

表示するコードは以下のように、<pre>タグでくくって書きます。

<pre class="brush: ...."> ..サンプルコード.. </pre>

表示コード内のタグは、&lt; &gt; を使って書かなければいけません。しかし、Code HighlighterにはCodeHighlighterButtonという別のプラグインがあり、これをインストールすると上図の下部にあるように「insertCode」というボタンが現れます。これを使って入力すると、このエンコードを自動でやってくれます。下図はそれを使った入力ダイアログです。

WYSIWYG画面では<pre>タグは表示されませんが、以下のように表示コードはそのままの形で見ることができます。

なお、Code Highlighterのドキュメントにはきちんと書かれていませんが、html-script, first-line,　gutterなどのオプションはCode Citationのものと同じものがそのまま使えるようです。これらは共通の元であるSyntaxHighlighterがもつ機能だからでしょう。

Code Highlighterの長所と欠点をまとめると以下のようになります。

長所

1. HTML画面でコード表示部分をそのまま見ることができ、ここで編集できる。
2. 再利用できる形でDB内にコードが保存される。
3. コード入力用ダイアログがあり、制御用の<pre>タグ生成もやってくれる。
     ただし、brush以外の細かい指定は、<pre>タグに自分で書き込まなければいけない。
4. WYSIWYG画面でもコード表示部分をそのまま見ることができ、ここで編集できる。
5. HTMLタグを表示できる。
6. インデント構造を表示できる。
     タブによるインデントもそのまま扱える。

欠点

1. WYSIWYG画面では制御用の<pre>タグが見えない。
2. 長い行を折り返したとき、べた書きになってしまう。
     SyntaxHighlighter V2を使ったとき。V3では折り返し自体が行われない。
3. フロント画面でコード表示部分に枠がない。このため１行しかないときコードかどうか判別しにくい。

3. 最適なプラグインは？

以上見てきたように、Code CitationとCode Highlighterは、それぞれ長所・欠点があり、どちらが良いかは、目的や好みによるといわざるを得ません。ただし、折り返し行の扱いと枠の有無はフロントエンドの表示に関わりますので、どちらかといえば、Code Citationの方がお勧めでしょう。

ただ、私自身についていえば、永久にCode Citationを使い続けるとは限りませんので、再利用できる形でDB内にコードを保存することを重視したいです。また、タブを使ったインデントも多用しています。Code Highlighterの長所は捨て難いところです。この２つのプラグインの長所を合わせ持ったプラグインがあれば、理想的なのですが....。当面はこの２つのプラグインを組み合わせて利用するのが最適なようです。

その後判明したことを追記しておきます。

上でCode Citationの利点として述べた「折り返し行の扱いと枠の有無」は、Code Citationによるものではなく、それが元にしているSyntaxHighligter 2.0.320という古い版がもっている機能でした。どういう訳か新しい2.1ではこれらのサポートがなくなっています。旧版はSyntaxHighligterのサイトからダウンロードできます。従って、Code HighlighterのsyntaxHighligter2というフォルダを旧版のものに置き換えれば、Code Highlighterだけを使って問題を解決できます。

• < 前へ
• 次へ >