記事投稿で Syntaxhighlighter を呼び出す

記事投稿時に Syntaxhighlighter を呼び出す方法は大きく分けてふたつあります。本家サイトでは <pre /> メソッドと <script /> メソッドとして説明されています。

  Installation

上記 Installation の Basic Steps として以下の様に設定手順が書いてあります。

Basic Steps

To get SyntaxHighlighter to work on you page, you need to do the following:
(シンタックスハイライターを動かすには あなたのページ上で次のことを行ってください:)

1. Add base files to your page: shCore.js and shCore.css
　(あなたのページに基本ファイルを追加します: shCore.js と shCore.css です)

2. Add brushes that you want
　(あなたの必要なブラシを追加します)

3. Include shCore.css and shThemeDefault.css
　(shCore.css と shThemeDefault.css も含めます)

4. Create a code snippet with either <pre /> or <script /> method
　(コードスニペットを書いてください <pre /> または <script /> いずれかのメソッドで

5. Call SyntaxHighlighter.all() JavaScript method
　(SyntaxHighlighter.all() JavaScript メソッドを呼び出してください)

前回までの設定はここでいう 1, 2, 3, 5 番目の設定をしていたことになります。つまり、 記事投稿時に必要な設定は 4 番目の設定だけです。

説明によると <pre /> タグを使った呼び出しと <script /> タグを使った呼び出しがあるとのことです。

それぞれに長所と短所がある様ですが、解説を比較してみる限り、<script /> メソッドはデメリット (PROBLEMS) が多すぎて、ちょっと使う気にはなれません。

また、"ブログで使うなら <pre /> メソッドを使った方が良い" と公式に書いてありましたので僕は <pre /> メソッドを使っています。<script /> メソッドは試していません。

<pre /> メソッドの書き方

こんな感じで書きます。と一例があげられています。<pre /> タグのクラスにブラシを指定しています。

<pre class="brush: js"> 

    /**

     * SyntaxHighlighter

     */

    function foo()

    {

        if (counter <= 10)

            return;

        // it works!

    }

</pre> 

指定可能なブラシはテンプレートで読み込んでいるブラシだけなので、最初は必要最低限だけ設定し、後々必要に応じて追加して行けば良いと思います。

この例では "brush: js" としてJavaScript のブラシを呼び出しています。

Perl ブラシを使いたい場合は "brush: perl" を HTML のブラシを使いたい場合は "brush: xml" を指定すれば OK です。

言語指定は Brush aliases を使っています。例えば JavaScript なら js, jscript, javascript のいずれかで指定出来ます。Perl なら perl, pl のいずれかです。

本家サイトの Bundled Brushes には Brush name (ブラシ名), Brush aliases (ブラシのエイリアス), File name (ファイル名) の表がありますので適宜確認しましょう。

  Bundled Brushes

ちなみに、各 Brush name が Example へのリンクになっているので、興味のある言語の見栄えをいつでも確認出来ます。気が利いていますね。

<pre /> メソッドのデメリット

実際に記事を投稿するにあたっては、<pre /> メソッドのデメリットを回避する必要があります。デメリットの内容は本家サイトの Installation に以下の様に書いてあります。

Installation

<Pre /> method

PROBLEMS: Major issue with this method is that all right angle brackets must be HTML escaped, eg all < must be replaced with &lt; This will ensure correct rendering.

(問題 : このメソッドの大きな問題は すべての直角ブランケットが HTML エスケープされなければならないことです, 例えば すべての < は &lt; に置き換えなければなりません これによって正しいレンダリングが保証されます.)

つまり、HTML 上で HTML が特殊な意味を持つ文字として解釈してしまういくつかの文字を、文字参照 (実体参照) という文字列に置き換える必要があるということです。

特殊文字の一覧は "HTML 実体参照一覧" 等で検索すれば参考になる Web サイトがワラワラと出てきますが、特殊文字の種類自体もワラワラとリストされているでとても覚えられたものではありません。

しかしながら、やはりインターネットは素晴らしいのです。

"HTML 実体参照 変換" 等で検索すればボタン一つで変換してくれる Web サイトがこれまたワラワラ出てきます。各自お気に入りを見つけて適宜利用しましょう。

ちなみに < は &lt; に、>　は &gt; に置き換えなければいけません。

てぃーだブログで記事投稿

てぃーだブログの記事投稿画面です。



ここに Perl で Hello Syntaxhighlighter. と 10 回繰り返して表示するコードを書きたいと思います。これは Syntaxhighlighter の設定が完了して感無量になっている様を表現しています。

記事中には以下の様に書きます。< pre /> メソッドで perl ブラシを指定しています。

<pre class="brush: perl">
#!/usr/bin/perl

use strict;
use warnings;

foreach (0..9) {
print "Hello SyntaxHighlighter !\n";
}
</pre>

これを実際に投稿すると以下の様になります。

 

#!/usr/bin/perl



use strict;

use warnings;



foreach (0..9) {

    print "Hello SyntaxHighlighter !\n";

}

Wonderful !

Syntaxhighlighter のオプション

次回は Syntaxhighlighter のオプションをいくつか紹介します。

僕が確認しているだけでも "行のハイライト表示" や "開始行番号の指定" 等といった便利なものがあります。また、<pre /> メソッドを使うけれども <pre /> 以外のタグを利用することが出来たりもします。

See you next time.

Syntaxhighlighter の記事