Syntaxhighlighter のファイルをダウンロードする

まずは公式ページから。

Syntax Highlighter - Alex Gorbatchev



トップページ右上の "download" をクリックします。



ダウンロードのページに移動したら、本文中の "Click here to download" をクリックします。クリックするとダウンロードが開始されるので、適宜保存先を指定してください。

ダウンロードされるのは "syntaxhighlighter_3.0.83.zip" というアーカイブファイルです。ただの ZIP ファイルなのでそのまま展開 (解凍) してください。

ダウンロードしたファイルの確認

解凍すると以下のファイルとフォルダが確認出来ます。

compass/
scripts/
src/
styles/
tests/
index.html
LGPL-LICENSE
MIT-LICENSE

利用するファイルは scripts/ と styles/ に格納されたファイルです。

これらのファイルはてぃーだブログ上で "かっこいい" 表示を実現するために必要なファイルです。前回説明した各プログラミング言語のブラシや、表示のためのスタイルシートなんかが入っています。

で、ここで問題があります。上記 Syntaxhighlighter の各種ファイルはインターネット上で参照できる場所に置かなければいけません。

ファイルをアップロードするサーバ領域の確保

通常は、同じサーバ内の別フォルダに置いて相対パスなりで指定してしまえば良いわけですが、てぃーだブログをはじめとしたブログサービスは、ブログ記事とそれに付随する画像ファイル以外を保存する領域を提供していません。

つまり、てぃーだブログ以外に、自前でサーバ領域を確保しないといけないわけです。

僕は自前のサーバ領域が別にありましたので、そこにファイルを設置しましたが、ほとんどのユーザはそういったサーバ領域はお持ちでないように思います。

しかしながら、さすがインターネットです。素敵な知見をもたらせてくれます。どうやら Dropbox 上にファイルを設置して参照することが可能な様です。やり方は以下の通り。

1. Dropbox の Public フォルダに scripts/ と styles/ をフォルダごとアップロードします。
2. それぞれのフォルダの必要なファイルを右クリックして "Coppy Public Link" から公開用 URL を取り出します。

必要なファイルは以下の通りです。

styles/shCore.css
styles/shThemeDefault.css
scripts/shCore.js
scripts/shBrush***.js (*** は希望するプログラミング言語の名前)

ちなみに Theme (テーマ) は Default ですが、style/ の中に色々なテーマがあるので後々好みで設定出来ます。また、 Brush (ブラシ) は複数設定可能なので、好みの言語があれば "Coppy Public Link" しておきましょう。

Syntaxhighlighter のファイルにアクセスするための URL の確認

自前のサーバ領域がある場合は Web 公開領域に該当のフォルダを設置して、その URL をメモしておきましょう。

例えば example.jp というドメインの Web 公開領域に syntax/ というフォルダを作ってscripts/ と styles/ の両フォルダをアップロードしたとすると URL は以下の様になります。

http://example.jp/syntax/styles/shCore.css
http://example.jp/syntax/styles/shThemeDefault.css
http://example.jp/syntax/scripts/shCore.js
http://example.jp/syntax/scripts/shBrush***.js (*** は希望するプログラミング言語の名前)

次回に続きます。

参考
-----
無料ブログでSyntaxHighlighterを使う

Syntaxhighlighter の記事