SyntaxHighlighter を使ってみた

前回・前々回の投稿でGoogle Map 上で経路を手動で作成する内容と経路検索をさせる内容の投稿を書いた。その際，ソースコードを載せたのだが，いっぱいあってどうも見にくい。仕方ないので，JavaScript の部分だけ青にしたりしてみたが，どうも見にくい。以前から，長めのソースを書くと，見にくいなぁ，と思っていた。ところが，前回参考にしたおやじプログラマー日記の「GoogleMap API V3」 の使い方その10（ルート検索2）というページはソースがそれっぽく色付けされていた。そういえばあの形式はよく見るなぁ，と思っていた。そこで，ごそごそ調べてみた。

そこでたどり着いたのが，SyntaxHighlighter だった。なんで今まで知らなかったんやろ？公式ページ（英語）は，SyntaxHighlighterであるが，日本語の方がいいので，私はパソコン初心者講座 ～道すがら講堂～や「暇つぶし」さんのSyntax Highlighter，「Jump Into!」さんのBloggerにおけるSyntaxHighlighter Ver.3.xを参考にさせていただいた。特にこのブログは blogger で書かれているので，blogger でどう使えばいいのかを知りたかった。そのため「暇つぶしさん」Syntax Highlighterを特に参考にした（他にも検索するといっぱい出てきたが…）

今回やったことは，
(1) blogger の「テンプレート」の「HTMLの編集」という所で，下記を </head> 直前に書き込んだ。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

これは SyntaxHighlighter を使うための下準備であり，いろんなスクリプトやプログラム言語に対応したルーチンを読み込ませ，必要なオプションが書いてある。私の場合，ruby や Python は使えないので，それらのファイルは読み込んでいない。

(2) web のソースファイル (html ファイル) を以下の部分に書き込む。

<pre class='brush: js; html-script: true'>
{ここにスクリプトを書く}
</pre>

ここで大切なのは，html の中の < や > を以下のように置き換えておかないといけない，という点。

< → &lt;
> → &gt;

また，<pre> ではなく，<script> を使うパターンもあるようだが，表示がおかしくなったりすることがあるので，<pre> の方がいいみたい。

たったこれだけですごくスクリプトが見やすくなった。やっぱり世の中考える人はいるんやねぇ。

しかし，問題がないわけではなさそう。実は，前回の投稿では，<br> が数カ所にあるのだが，それが SyntaxHighlighter ver 3 を使うと，普通の改行と解釈されてしまった。それはバグなのかなぁ？よくわからないや。

---

（追記）2012年10月に気づいたのだが，最近ブログの表示がとても遅い。なぜかと思っているとどうやらこの SyntaxHighlighter でアクセスしている alexgorbatchev.com からファイルを読み込むのに時間がかかっているみたい。おまけにうまくハイライト表示してくれないし…。ということで，とりあえず2012年10月時点では SyntaxHighlighter は使っていない。

---

（追記２）2017年3月にもう一度設定してみようと思ったが，highlight.js を使ってみることにした。 highlight.js に関してはBlogger で highlighter.js を使ってみたに書いてみたので見てみてほしい。