Validに対応させたコードを綺麗に見せる『SyntaxHighlighter』導入

2008/03/26

カテゴリ：: jQuery plugin紹介

タグ：: javascript; SyntaxHighlighter; Pre; ソースコード

JavaScriptやCSSの例を載せるときに、
普通に見せていただけでは色分けなどされていないし、
行番が伝えにくかったりして、何かと不便だった。

そこで、ソースコードを綺麗にしてくれるJavaScriptがあったので、
導入してみることにした！

SyntaxHighlighterって？

このJavaScriptは、ソースコードを見やすくするためのもの。
同様にソースコードを綺麗に見せるものはたくさんあるが、
対応している種類の多さと、
何よりも、今勉強中のJavaScriptということだけあって、
導入してみようと思った！

対応している言語の量も多く、以下の言語のソースコードを
綺麗に色分けしてみてくれるようだ。

C,C++,C#
CSS
Delphi
Java
JavaScript
PHP
Python
Ruby
SQL
VB
XML/HTML

ちなみに、有名なブログの『CSS HappyLife』でも
このSyntaxHighlighterが使われているようだ。

SyntaxHighlighterはここでダウンロードすることができる
syntaxhighlighter - Google Code

ちなみに、こんな風に色分けしてくれる
(JavaScriptがoffになっていると見れません。)

<div id="SampleId01" class="SampleClass01">
　　divのサンプル
</div>

配色のCSSも今回は自分でカスタマイズしてみました。

SyntaxHighlighterの使い方。

通常の使い方は、以下のように設定する。

CSS（head内）

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>

JavaScript（ページの一番下に記述）

<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

HTML　その１

<textarea name="code" class="xhtml">
・・・内容
</textarea>

HTML　その２

<pre name="code" class="xhtml">
・・・内容
</textarea>

注意すべき点としては、JavaScriptの挿入位置は、
必ずページの一番下である必要がある。
このJavaScriptは、読み込まれた時点で該当部分を検索するので
綺麗に表示させたい部分よりも前においてしまうと、
該当部分を見つけることができないのである。

HTMLでは、preとtextareaのみ対応している。
どちらも name="code"を記入して、classで言語を選択する。

デフォルトの使い方はValidではない

個人的なマークアップのこだわりなのだが、
ソースコードはどちらかというとpreでマークアップしたい。
一番なのは、<pre><code>でマークアップするのだと僕は思っている。

ところがこのSyntaxHighlighterではpreの内側にcodeをいれると
それすらも色分けされて表示されてしまう。
なのでcodeは入れるのをあきらめた。

しかし、preの中でnameを入れるのはもっと好ましくない。
preタグではname要素を使うことが本来できないからだ。
これをするとvalidateでエラーが返ってくる。

なんとかならないものかと思ったので、
本体のソースを少し変更して、name="code"ではなく
title="code"で対応させるようにしてみた。

だからここでは

<pre title="code" class="xhtml">
・・・内容
</textarea>

というような記述にして、Validに対応させてみた。

title要素をつかうのはこれまたどうかと思うかもしれないが、
とりあえずValid対応させたので、個人的に満足。

さらに、JavaScriptを読み込む位置が一番最後だったのを
head内に持ってきたかったのもあるので、
onLoadというものをつかって、HTMLがすべて読み込みおわってか
動作させるように設定を変更してみた。

今後、ソースコードをみせるときは、
コレをつかって表示させていこうと思います。

ただ、seesaaでこれを使うときは、
利用記事で、改行を自動的に<br />に
変換させる機能を止める必要がある。

参考サイト：

syntaxhighlighter - Google Code