はてなブログでSyntaxHighliterを使ってみる

※ 2016−08−11 このやり方だとエラーが発生するようになってしまいました。
↓詳細はこちらの記事をお読みください。  

wbhappy.hatenablog.jp

ソースコードを貼り付けたいのでSyntaxHighliterを入れてみました。

悩ましいところですが、以下のような方針でやりました。

• ファイルはホストされているものを使う。
• コアのファイル(shCore.jsとか)だけはヘッダに埋め込む
• 他のBrush系のファイルはAutoLoaderを使って非同期でロードする
• 必要な記事にだけ初期化処理を埋め込む
  
  

1. コアファイルをヘッダに埋め込む
   [設定]→[デザイン]→[カスタマイズ]→[ヘッダ]→[タイトル下] で以下のhtmlを埋め込む
   

2. 初期化処理
   使うときにだけ以下のScriptを記事に埋め込む。
   読み込むファイルは必要に応じて変える。

   function syntax_path(){
   	var args = arguments,
   		result = [];
   	for(var i = 0; i < args.length; i++)
   		result.push(args[i].replace('@', 'http://alexgorbatchev.com/pub/sh/current/scripts/'));
   	return result
   };
   
   SyntaxHighlighter.autoloader.apply(null, syntax_path(
       //'bash shell @shBrushBash.js',
       'js  @shBrushJScript.js',
       'xml html @shBrushXml.js'
   ));
   SyntaxHighlighter.all();
   
   

3. preタグで囲む
   適用させたいところをpreタグで囲ってクラス名を任意のものにすればOKです。

     <pre class="brush: html;"  data-unlink>
       <div>サンプルコード</div>
     </pre>
   

   ※preタグのdata-unlinkは、はてなブログのキーワードリンクの自動付与を回避するために必要です（随分ハマりました・・・）