シンタックスハイライトの導入

技術系のブログだとソースコードを貼り付ける事が多い。するとやっぱカッコ良く色分けして表示したいよね。そこでシンタックスハイライトのJavaScriptを導入することにした。

どんなのがある？

いくつか調べた結果、候補は以下になった。

• SyntaxHighlighter
• google-code-prettify

googleの方は、かるくて導入時のファイルもすくなくてヨサゲなんだけど、行番号がつかないのがネック。
解説ブログをかくときにやっぱ行番号があると説明しやすそうだしね。
それに対してSyntaxHighlighterの方は、行番号はあるし、クリップボードコピー機能はあるし、色分けも派手だしでいい感じ。ただしちょっと読み込みが重い？
ま、とりあえずHilighterの方が見栄えが良いのでこっちを導入してみた。

インストール方法

とりあえず以下からアーカイブをダウンロード

• SyntaxHighlighter/Download

ダウンロードしたら、それらのソースコードをウェブ上のどこかにアップロードしなくてはならない。
俺はHPのスペースを持ってないので、無料でつくれるDropBoxでアカウントを作りそこのPublicフォルダに置くことにした。

• DropBox

その後、解凍したフォルダに入っているtest.htmlをもとに、jsとcssをブログのテンプレートにインクルードする。
その際、test.htmlの中のスクリプトのパスは相対パスになっているので、Dropboxの絶対URLに書き換える必要がある。
これを

src="scripts/shCore.js"

こんな感じに

src="http://dl.dropbox.com/u/2140550/htdocs/SyntaxHihglighter/scripts/shCore.js"

また、下記部分も変更が必要なので注意。

SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
  SyntaxHighlighter.all();

こんな感じに

SyntaxHighlighter.config.clipboardSwf = 'http://dl.dropbox.com/u/2140550/htdocs/SyntaxHihglighter/scripts/clipboard.swf';
  SyntaxHighlighter.all();

導入した感想としてはやっぱイイ！でも重い！jsをかたっぱしからインクルードしてるから仕方ないけど。。。