- 以下をBloggerテンプレートの
</head>タグの前に貼り付ける：
もし、常に最新のバージョンではなく、特定のバージョンのものを利用したい場合は、「http://alexgorbatchev.com/pub/sh/current/」を「http://alexgorbatchev.com/pub/sh/2.1.364/」などに変更してください。
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.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/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.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/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<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/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
「shBrush言語.js」は、公式サイトや他のサイトでも様々な言語のものが配布されているので、適宜必要なものを追加してください（公式サイトなどホスティングして提供されている所以外では、必ず自分でファイルを置く場所を確保し、そこから取得するようにしてください）。
また、スタイルシート「shThemeDefault.css」の代わりに自分の好みのものに変更することもできます。 - ブログエントリのときに、「HTML の編集」タブを選択し、以下のように入力する：
CDATAでコードを囲った特別な<script>タグを使用する方法：<script type="syntaxhighlighter" class="brush: html"><![CDATA[
ここにコードを張り付ける
]]></script>- もしくは
<pre>を使用する方法（HTMLエスケープはQuick Escapeのサイトで簡単にできます）：<pre class="brush: html">
ここにHTMLエスケープされたコードを貼り付ける
</pre>
brush: html」の部分はこちらを参考にして、適宜「brush: Ruby」などに変更してください。
2010年3月12日金曜日
Bloggerで「SyntaxHighlighter 2.x」を利用する
前の記事では、古い「SyntaxHighlighter 1.5.x」を使用していましたが、今回は新しい「SyntaxHighlighter 2」系をBloggerで利用する方法を紹介します。公式サイトはこちらです。2010年3月12日現在での最新バージョンは、2.1.364 です。しかしながら、以下で紹介する方法は常に最新バージョンを利用できるようになっております。今回はこちらと「Awesome code syntax highlighting made easy | Carter Cole's Blog」を参考にしました。
