｜ Works
「SyntaxHighlighter」をここでも使えるようにしてみた
MercurialとPygmentsでスクリプト等を見やすくすることができましたが、今さらながらここでも同じようなことをしてみました。
元々はここで使用している「a-blog cms」の機能をそのまま使っていましたが、VBScript等のWindows系のコードを相性が悪いので、別のものを使用します。
とりあえず必須だった機能は、
- 自分がよく使う言語に対応（Bash、Perl、VBS、PowerShell、XML、他）
- 行番号が表示される
- "pre"タグ以外で使えること（"pre"だとa-blog cmsのテンプレートに干渉するため）
くらいです。
実現する方法も、JavaScriptを利用したものや、コードをHTML変換して貼り付けるタイプ等があるみたいですが、定番でネットでの情報が多い「SyntaxHighlighter」を使うことにしました（後で気まぐれに他のに変えることもあるかもしれませんが）。
最新版は"3.0.83"みたいです。
このZIPファイルをダウンロードしてきて、展開して中にある"scripts"ディレクトリと"styles"ディレクトリを適当な場所に配置。
この中にあるCSSやJSファイルを読み込むようにヘッダに記述します。
最低限必要なのは"shCore.js"、"shCore.css"、"shThemeDefault.css"です。最後のはテーマファイルなので、同じフォルダにある他のテーマに差し替え可能です。
同様に記載するコードに合わせたファイル（例えばBashなら"shBrushBash.js"）も読み込みます。
とりあえず使いそうなものを全部読み込むと、こんな感じになりました。
<link type="text/css" rel="stylesheet" href="css/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="css/styles/shThemeDefault.css" />
<script type="text/javascript" src="js/scripts/shCore.js"></script>
<script type="text/javascript" src="js/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="js/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="js/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="js/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="js/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="js/scripts/shBrushPerl.js"></script>
<script type="text/javascript" src="js/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="js/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="js/scripts/shBrushPowerShell.js"></script>
<script type="text/javascript" src="js/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="js/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="js/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="js/scripts/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.tagName = "code";
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script> 最後尾の"SyntaxHighlighter.config～"や"SyntaxHighlighter.defaults～"はオプションの設定です（詳細はこのへん）。
前述のように"pre"では使いたくないので、ここでは"code"タグで記述できるようにしています。
これで、コードを記述するときに"code"タグを使うと、上記の設定例のところのように綺麗に表示されるようになりました（タグ内にclass="brush: <コードの種類>"も記述する）。
描画が遅いのは仕方ないですね。
