BloggerにSyntax Highlighterを導入してソースコードを貼り付けたくて四苦八苦

前のエントリでSyntax Highlighterのウィジェットがうまく導入できなかったと書いたが、現在使えないようになっているというより、Chrome（自分はメインで使用）やFirefoxでは導入時に色々トラブルトラブルがつきものらしい。

試しにGoogleで「blogger syntax highlighter "Add to Blogger"」で検索してみると、出るわ出るわ。
皆さん苦労してらっしゃる様子。

それでも、こちらあたりのページを見てみると、一旦blogger.htmlをダウンロードして、それをブラウザで開けばうまくいくらしい。
http://blog2.k05.biz/2011/07/bloggersyntaxhighlighter.html
http://blog.prunus.jp/2010/06/blogger-syntax-highlighter.html


というわけでやってみる。

ダウンロードしたblogger.htmlをChromeで実行すると、JavaScriptのエラーになってしまった。
それならばと、IE8でblogger.htmlを実行してみると、今度は「Add to Blogger」のボタンが表示されたのでこれをクリック。
「ページ要素を追加」の画面に飛ぶので「ウィジェットを追加」のボタンを押すけど、Bloggerのページに飛ばない…。
おかしい。もう一度「ウィジェットを追加」のボタンを押してもやっぱりBloggerに飛ばない。

一旦Bloggerを開いてページレイアウトでHTML/JavaScriptガジェットの内容を見てみても、やっぱり追加されていない。

もう一度IE8でblogger.htmlを開いて、「Add to Blogger」のボタンを押してみると、こんどは
｢Internet Explorerは、クロスサイトスクリプトを防止するために、このページを変更しました。詳細についてはここをクリックしてください...｣
のエラー。何回やってみてもこのエラーになる。
こちらのページに出ている症状と同じである。ちなみにOSはXP。
http://micchysdiary.blogspot.jp/2011/04/blogger-syntax-highlighter.html


さてどうしたものかと考えていたところ、こちらのページにBloggerのレイアウト編集から追加する方法が紹介されていたので、これを試してみることにした。
http://moririn-web.blogspot.jp/2011/12/bloggersyntaxhighlighter-ver3x.html



ところがどっこい、ガジェットを追加してみたものの、肝心のハイライトが適用されていない。（単なるpreタグとしか機能していないように見える）



どこまで手こずらせてくれるのか。Bloggerとソースコードの表示ってそんなに相性悪いのか？

こうなったら仕方ない。あまり推奨された方法ではないみたいだけど、ブログのテンプレート設定から、HTMLのHEADに直接入れてみる。（ここまでくると、そこまでする必要あるのか、という気もしてくるが）
http://moririn-web.blogspot.jp/2010/03/bloggersyntax-hilighter.html

<pre class="brush: java">
ここにコード
</pre>

こんなかんじでコードをpreタグで挟めば良いみたい。ただし<>や&などの記号はエスケープしておく必要がある。

</head>の直前に以下のスクリプトを挿入した。

<!-- begin:SyntaxHighlighter -->
<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.all();
</script>

前回のコードの表示を試してみる。

        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
                MenuInflater mi = getMenuInflater();
                mi.inflate(R.menu.menu, menu);

                // TODO 自動生成されたメソッド・スタブ
                return super.onCreateOptionsMenu(menu);
        }

        @Override
        public boolean onPrepareOptionsMenu(Menu menu) {

                //メニューボタンが押されたらゲームをポーズ状態にする
                mGameView.setMode(GameView.PAUSE);

                // TODO 自動生成されたメソッド・スタブ
                return super.onPrepareOptionsMenu(menu);
        }

ようやっとハイライト表示されるようになった。もうこれでいいです(；´Д｀)
えらい時間かかったわ…。


最後にもうちょっとだけメモ。

わざわざエスケープしたソースを入れるのが面倒なら、以下のようにすればエスケープしていなくても大丈夫らしい。（<script></script>タグとかはダメみたいだけど）