How to Highlight Code in Blogger

僕はBloggerでコードに色付けするときは、Syntax Highlighterを使っているんですが、古いversionのSyntax Highlighterだと、どうやらshellなどのコードは色付け出来ないようです。色付けするためには、最新のversionに更新する必要があります。僕の場合は、こんな感じで更新出来ました。

1. DashboardからDesign -> Edit HTMLに行き、"/head"を検索。

2. 見つかった</head>タグの直前に、次のコードを挿入する。

<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
※赤字は、ハイライトしたい言語のソースです。今回はbashのスクリプトをハイライトしたいので、shBrushBash.jsになります。他の利用可能な言語とそのhostはココを参照します。

3. 投稿する記事のハイライトしたいコードを、次のタグで囲います。

<pre class="brush: bash">
echo "hoge"
</pre>

※赤字は、ハイライトしたい言語のaliasです。他の利用可能な言語のaliasはココを参照します。

僕の場合、こんな感じで記事を投稿したら、先の投稿のように、bashをハイライトする事が出来ました。何かの参考になれば幸いです。

Tweet