改めて SyntaxHighlighter を導入

最近、コードを貼るために gist を使っていたりしたのですが、やっぱり SyntaxHighlighter が良いかな、と思っていました。

だいぶ前に導入したのに放置していたので、改めて設定し直しました。

SyntaxHighliter っていうのは、ブログにこんな感じでソースコードを表示するためのツールです。

導入するためには、Blogger のテンプレートを HTML で編集して以下のような設定をタグの前に入れる必要があります。

絶対に入れなければならない設定はハイライトしている 1,2,3,14,16,17 の6行。

4 行目から 13 行目の部分は、スクリプトはハイライトしたい種類のみを指定すれば良いので、自分で使うものを指定しましょう。例えば CSS しか使わないなら shBrushCss.js だけを読み込めばOKです。言語の種類とファイル名の関係はここを読むと書いてあります。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'></script>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.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/shBrushDiff.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/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language='javascript' type='text/javascript'>
	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.all();
</script>

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.all();

</script>

また、ハイライトのイメージを変えることが出来ます。私は Eclipse というテーマを使っています。テーマについてはここに書いてあります。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'></script>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'></script>

1 2	<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'></script> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'></script>

15 行目は Blogger の場合には必ず true にしてください。

<script language='javascript' type='text/javascript'>
	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.all();
</script>

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.all();

</script>

これらをテンプレートに指定したら、次は実際のコンテンツでの書き方です。細かくカスタマイズすることもできますが、私は Pre タグで指定するようにしています。

Pre タグで class に “brush: 言語名” を指定することで SyntaxHighlighter を使った表示になります。なおコンテンツに書くコードの部分は、きちんとエンコードしておく必要がありますので注意してください。

今回のコードはこんな風似書いています。

<pre class="brush: js; ruler: true; first-line: 1; highlight: [1, 2]">
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'></script>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css'></script>

あとは、これと同じことを MarsEdit の Preview テンプレートに指定しておくことでプレビューでも見れるようにしておきましょう。基本は同じようにテンプレートに設定するだけのはずなのですがうまくハイライトされませんでした。どうやら MarsEdit のプレビューではハイライトさせるための JavaScript の動作がうまくマッチしないらしくコードを変える必要があるようで、以下のサイトに回避策が載ってました。

MarsEdit: Preview with SyntaxHighlighter » Marc Schwieterman’s Weblog

I’ve recently been trying out the MarsEdit blog editor. One issue I’ve run into is that SyntaxHighlighter doesn’t work with the preview feature because the page in the preview window only gets loaded once.

そこで MarsEditのテンプレートの方だけ以下のように変更します。

<script language='javascript' type='text/javascript'>
	SyntaxHighlighter.config.bloggerMode = true;
	SyntaxHighlighter.all();
	function refreshHighlighting() {
		SyntaxHighlighter.highlight();
		setTimeout("refreshHighlighting()", 1000);
	}
	refreshHighlighting();
</script>

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.all();

function refreshHighlighting() {

SyntaxHighlighter.highlight();

setTimeout("refreshHighlighting()", 1000);

}

refreshHighlighting();

</script>

これでプレビューでもハイライトするようになりました。

RSSリーダで読んだりするとうまく表示されなかったりすると思いますが、それを解消する良い手はいまのところ見つかっていません。RSSリーダでも JavaScript が動くタイプの場合はうまく表示してくれると思います。 JavaScript が動かなくてもキレイに見れる良い手があれば是非教えてください。

最後まで読んでいただきありがとうございます。