SyntaxHighlighterの設定・導入方法

WEB上のソースコードを見やすく、キレイに色分けしてくれるJavascriptライブラリがあります。
いわゆるシンタックスカラーリングとか呼ばれてるやつですね。
ググってみると、いくつか種類があるようですが、今回は個人的に見慣れていると感じた、
SyntaxHighlighterを導入してみました。

忘れそうなので導入手順をメモ。

※2010年7月15日追記
WordPressを使っている方は以下の手順を踏むよりも、お手軽に導入できるプラグインがあります。

1. 公式サイトからソースコードをダウンロードする。

まずは、ソースコードをダウンロードします。
GoogleCodeの方にもページはあるようですが、更新が止まっているようなので、
本家サイトからダウンロードします。

2.必要ファイルをアップロードする。

ダウンロードしたファイルを解凍すると、以下のような構成になっています。

解凍後の状態

test.htmlをブラウザで表示させると、ソース部分がハイライトされているのが確認できるかと思います。
また、srcフォルダには圧縮前の可読性の高いソースが入っています。
とりあえず使うのに必要なのは、scriptとstyleフォルダですので、サーバ上にアップロードします。

3.HTMLファイルでライブラリを読み込む。

アップロードが完了したら、今度はHTML側にライブラリを読み込む記述を追加します。

まずは、jsファイルの読み込みです。
一行目のshCore.jsは読み込み必須です。で、2行目の以下のjsファイルは
ハイライトさせたい言語によって変わってきます。
下の例だと、CSS、AS3.0をハイライトします。

<script src="/設置したパス/shCore.js" type="text/javascript"></script>
<script src="/設置したパス/shBrushAS3.js" type="text/javascript"></script>
<script src="/設置したパス/shBrushCss.js" type="text/javascript"></script>

続いて、ハイライトの見た目を設定するCSSファイルを読み込みます。
こちらも1行目の「shCore.css」は読み込み必須です。

2行目は実際の見栄えを決めるファイルです。
同梱の別ファイルを読めば、別のスタイルに変更が可能です。

<link rel="stylesheet" href="/設置したパス/shCore.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/設置したパス/shThemeDefault.css" type="text/css" media="screen" />

4.初期化処理

必要ファイルを読み込んだら、初期化します。
特に何も考えずコピペです。

<script type="text/javascript">
	SyntaxHighlighter.config.clipboardSwf = '/設置したパス/clipboard.swf';
	SyntaxHighlighter.all();
</script>

5.ハイライトしたいソースを<pre>タグで囲む

で、実際にハイライト表示させたソースを<pre>タグでくくります。
最後にくくっているソースの言語をclass名に設定して完了です。
下記はHTMLの場合です。

<pre class="brush:html">
ハイライトさせたいソースコード
</pre>

コメントを残す

メールアドレスが公開されることはありません。