「SyntaxHighlighter」の基本記述


[SyntaxHighlighter 関連記事]

前回は「SyntaxHighlighter」の概要、ライセンスからダウンロードまでをみました。
今回は公式サイトに「SyntaxHighlighter」のユーザ説明があったので詳しくみていきます。
この説明は、wikiにより随時更新されているので2009/09/23時点の内容でみています。

syntaxhighlighter03

About

syntaxhighlighter04

ここでは、ライブラリを使ったらどんな感じになるのかサンプルが表示されています。

SyntaxHighlighter helps developers to display code on their 
website.Just like what you see above!

訳:
SyntaxHighlighterは開発者がwebサイトにコードを表示するのを助けます。
ちょうど上記のような感じになります。

Usage Guide

ここでは基本的なライブラリの記述方法とXMLでのエスケープ処理について書かれています。

SyntaxHighlighter looks for <pre /> tags which have a 
specially formatted class attribute. 
The format of the attribute is the same as the CSS 
style attribute.
The only required parameter is brush (see configuration),
which should be set to one of the brush aliases
that you must have already loaded.

訳:
SyntaxHighlighterは、特別に形式化されたクラス属性を持つpreタグを
探します。その属性のフォーマットはCSSスタイル属性と同じです。
唯一の必須パラメータはbrush(構成をみる為)で、brush aliasesの
中から1つ指定してください。。
それを利用する為、対応するbrush aliasesをロードしておいてください。

表示したい箇所をpreタグで挟んでライブラリが準備したクラスを設定するようです。サンプルも準備されてるのでサンプルをみて確認していきます。

【サンプル】
<pre class="brush: js">
	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
	SyntaxHighlighter.all();
</pre>

サンプルは説明されている通り preタグで挟んでいます。何の言語の構文判定をするのかはclass属性のパラメータ brushで指定し、brushパラメータは唯一の必須項目です。サンプルでは「js」なのでjavascriptとして構文解析を行いハイライトします。
上記説明でbrushの値はaliasesから1つ選び、それをロードしておいてくださいと書かれています。この内容はユーザガイドの「Bundled syntax」の項を見ればよくわかります。

syntaxhighlighter_05

Bundled syntax」では表になっていて、いくつもの言語に関する 「Brush name」、「Brush aliases」、「File name」が記述されています。このライブラリの対応言語は別記事でみていこうと思いますので今回はjavascript部分だけを抜粋しました。「Brush aliases」をみてみると 「js, jscript, javascript 」 3つの記述方法があることがわかります。この3つのaliases から1つを選んで brushの値とします。サンプルでは「js」が選択されています。説明ではロードしておいてくださいと書かれていますが、「File name」の shBushJScript.js をロードしておいてくださいということです。

【ライブラリの実行】
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
SyntaxHighlighter.all();

ライブラリの実行スクリプトのサンプルもありました。<pre>で挟んだ範囲はライブラリの対象を示しているだけで実際にスクリプトを実行しないと動作しません。上記のようなjavascriptを実行させることでライブラリは動作します。「clipboard.swf」のパスやconfigの設定などは当然各自で違うのでサンプルとしての1つです。

XMLタグのエスケープ処理についても書かれています。
Because design of HTML/XML,
it is impossible to use left angle bracket "<" characters
unescaped.
This character causes browsers to interpret the following text
as XML tags,which can completly break your highlighted block
or even the whole page.
Please make sure to replace all instances of < with &lt;

訳:
HTML/XMLの表示上、左のかぎ括弧「<」 を使うことは不可能です。
この文字はブラウザが以下のテキストをXMLタグとして解釈する原因
になります。ハイライトするブロックだけでなくページ全体のコード
さえを崩す原因になります。
どうか全ての「<」を「&lt;」に置換していることを確認してください。

簡単に言えば、「<」を使わずに、変わりに「&lt;」を記述するようにとのことです。

【実践する】
<head>
  <script type="text/javascript" src="http://〇〇/scripts/shCore.js"></script>
  <script type="text/javascript" src="http://〇〇/scripts/shBrushJScript.js"></script>
  <script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
    SyntaxHighlighter.all();
  </script>
  <link type="text/css" rel="stylesheet" href="http://〇〇/styles/shCore.css"/>
  <link type="text/css" rel="stylesheet" href="http://〇〇/styles/shThemeDefault.css" id="shTheme"/>
</head>
<body>
<pre class="brush: js">
  【javascriptコード】
</pre>
</body>

この記事をみてもらえればわかると思いますが、既にライブラリを使用しています。どのようにコードを記述したか実践で説明します。2行目で「shCore.js」を読み込んでいます。ライブラリのコアなので必ず読み込む必要があるようです。今回表示するコードはjavascriptなので、3行目ではjavascript解析用コードの「shBrushJScript.js」を読み込んでいます。ライブラリはいくつもの言語の解析スクリプトを準備していますが無理に全部読み込む必要はありません。4から8行目でライブラリを実行しています。9行目から10行目でハイライト部分のCSSを読み込んでいます。いくつか準備されていてお好みのデザインを選択できます。今回はデフォルトの「shThemeDefault.css」を読み込んでいます。13から15行目は上記で説明した通りにハイライトしたいコードを書きます。

以上で基本的なライブラリの記述方法をみました。


[SyntaxHighlighter 関連記事]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です