[Blogger] Syntax Highlighter V3 を JavaScript ガジェットで設置

Syntax Highlighter 導入メモ第三弾。

前回、テンプレート HTML を直接編集するのを嫌って、CSS カスタマイズで Syntax Highlighter を導入しようとしたがあえなく失敗した。
今度は、JavaScript ガジェットでやってみたところうまくいったのでそのメモ。

基本的には CSS のロードさえ JavaScript の中からできればうまくいくはず。
ここのコードを参考にさせてもらった。

• 外部cssを動的に読み込む方法
  -- Born Neet --

---

HTML/JavaScript ガジェットを使う。
ガジェットを追加する場所は、本来はヘッダの近くがよさそうなのでヘッダの直下に追加したいのだが、 ヘッダ部分に幅ができて間延びした感じになってしまう。仕方がないのでサイドの下の方の目立たない場所に追加するも重めの zenback で引っかかるのでサイドの一番上に配置。
変な空白ができてしまうが仕方がない。一応動いてはいるので問題はなさそう。
ガジェット自体を非表示にする方法はないのだろうか・・・

ガジェットに追加したコードは以下の通り。

<script type='text/javascript'>
  function loadCss(url) {
    var headElem  = document.getElementsByTagName('head')[0]
    var linkElem =document.createElement("link")
    linkElem.rel = "Stylesheet"
    linkElem.type = "text/css"
    linkElem.href = url
    headElem.appendChild(linkElem)
  }
  loadCss("http://alexgorbatchev.com/pub/sh/current/styles/shCore.css");
  loadCss("http://alexgorbatchev.com/pub/sh/current/styles/shThemeMidnight.css");
</script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type='text/javascript' ></script>

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"  ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" ></script>

<script language='javascript' type="text/javascript"><!--
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.all();
// -->
</script>

最初に CSS をロードする loadCss 関数を定義して、2本 CSSをロード。
あとは、JavaScript をロードして最後に Syntax Highlighter を config して all() を実行。
ガジェットでできるとテンプレート HTML をいじらないで済むので気軽に編集できる。

一点 はまったのが、

<script src=.... ></script>

となっているところを、

<script src=.... />

とすると、なぜかうまく動作しない点。
原因は不明。小一時間はまった。

---

ロードするテーマと、JavaScript ファイルは以下を参照。

• テーマの選択
  SyntaxHighlighter - Themas
• テーマの選択 (こちらでも見れる）
  Syntax Highlighter(v3) Themes Demo
• ハイライトする言語ごとの JavaScript
  SyntaxHighlighter - Bundled Brushes
• 使う際のパラメータの指定方法
  SyntaxHighlighter - Configuration