さくらのブログやSeesaaブログでSyntaxHighlighterを使う。: 俺の砂箱

2011年05月16日

さくらのブログやSeesaaブログでSyntaxHighlighterを使う。

初エントリにも関わらず、いきなり小難しいエントリを一つ。

ウェブサイトなどでソースコードを綺麗に表示させるためによく使われる SyntaxHighlighter を当ブログでも導入してみた。

ちなみに当ブログは「さくらのブログ」を利用しているのだが、「Seesaaブログ」と互換のブログサービスなので、そちらでも応用できるだろう。

まずは、SyntaxHighlighter本家サイトからダウンロード。
今回は、syntaxhighlighter_2.1.382.zipというファイルをダウンロードした。

ダウンロードしたファイルを解凍すると、何やらワンサカとファイルが入っているのだが、まず基本となるのは以下の3つだ。これらを取り出しておく。

　shCore.js
　shCore.css
　shThemeDefault.css

次に自分のHPに表示させたいソースコードに応じて必要なjsも取り出す。
ちなみに俺は取り敢えず Javascript用、 Python用、CSS用、PlainText用があればいいかなと思ったので、それらに対応するjsを取り出した。

　shBrushJScript.js
　shBrushPython.js
　shBrushCss.js
　shBrushPlain.js

更にstylesフォルダの中にあるpng画像一式とscriptsフォルダの中のclipboard.swfも取り出す。
これはソースコードの上にカーソルを置くと表示される「クリップボードへコピー」などのボタンを表示するためのものだ。

これらのファイルを自分のブログにアップロードしたら、次にブログのデザインHTMLを編集する。

HTMLのヘッダー辺りに以下を追加。
ファイルパスは自分のサーバのURLに書き直すべし。

<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="scripts/shBrushPython.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>

更に適当な場所(フッター辺りがベスト？)に以下も追加。
こちらもファイルパスは自分のサーバのURLに書き直すべし。

<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

ちなみに改行がbrタグに自動変換されてしまうブログシステムでも、上記のように bloggerMode という属性を true にしておくことで改行が二重にならずに済む。

以上で準備完了。
早速エントリ内にソースコードを表示してみよう。
例えば以下のように書いてみる。

<pre class="brush: python">
#!/usr/bin/python

print 'Hello World!'
print 'Goodbye World!'
</pre>

そうすると下のように表示される。

#!/usr/bin/python

print 'Hello World!'
print 'Goodbye World!'

2011/05/17
↑FirefoxやIEだとうまくいくのにGoogle Chromeで試すと駄目なのは何故だろう？

■おまけ1

自分のサーバにcssやらjsやらをアップロードするのがメンドクサイのなら、いっその事本家サイトのホスティングを利用してしまうという手もある。HTMLに以下を貼り付けるだけで使えるんだから非常に楽チンだ。

<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPlain.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>