[Blogger] Syntax Highlighter V3 を CSS追加から導入

前回、Syntax Highlighter V3 を導入してみた。

• Syntax Highlighter V3 を導入する

これはこれでうまく動作したのだが、テンプレート HTML を編集する必要がある。

あまり、テンプレート HTML をいじりすぎるとどこをどういじったかわからなくなるので、 なるべくテンプレートをいじりたくはない。

そこで、テンプレート カスタマイズの 「CSSを追加」で行けるか試してみた。
・・・ が、あえなく敗退。
今回はその敗退の記録。

---

アイデア

テンプレートカスタマイズ の アドバンス > CSS の追加で CSS を追加すると、 head要素内の

 <style id='page-skin-1' type='text/css'><!-- 

という style 要素の 末端に 追加した CSS が導入される。

ならば、追加する CSS 内で「 </style> 」を記載して、style 要素を終了してしまい、 script 要素や link 要素を書き込んで、後続の「 </style> 」と辻褄を合わせるために、 最後に、「<style>」 を書けばうまくいくはず。

---

やってみた

追加した CSS は以下の通り。

--></style>

<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/shThemeMidnight.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/shBrushJScript.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/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>
<style type='text/css'><!--

出力された HTML ソースを見ても 期待通りの結果になっているのだが、 やっぱりこんなところに script 要素や link 要素を入れてはだめなのか、 Syntax Highlighter は動いてくれなかった。

無念・・・