Bloggerにコードをハイライトして表示するには(SyntaxHilighter)

Web上に色々情報があったものの、導入するとき少し迷ってしまったので、備忘録として。 SyntaxHilighterは数行のコードを記入するだけでコードを強調でき非常に簡単。

コード

Bloggerの記事編集画面をHTMLモードにして、コードを表示させる部分に以下のように記載するだけ。
記事中に直接記載するのは記法としてはあまり好ましくないのかもしれないが、直観的でわかりやすい。
以下にJScriptの場合を表示しているが、表示を変えたいときはBrushの一覧を参考に、以下の下線部を変更すればよい。 なお、XMLコードはHTML escape（→例えばここ）しておかないと使用できない。

• <link href="...shBrushJScript">
• <pre class="brush: js">

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<br />
<pre class="brush: js">//Code you want to upload
//ここに表示させたいコードを入力する 
function foo()
{
}
</pre>
<script type="text/javascript">
 SyntaxHighlighter.all()
</script>

実行結果

//Code you want to upload
//ここに表示させたいコードを入力する 
function foo()
{
}