[Blogger] コードの表示

Bloggerできれいにコードの表示をしたいので探してみたらSyntaxHighlighterというのがあった。

デザインの「HTMLの編集」でテンプレートを編集する。

</head>の手前あたりに以下を追加。

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript">
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<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'/>

</body>の手前あたりに以下を追加。

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

これでテンプレートを保存。
コードの言語に応じたブラシが用意されているので必要なものをリンクしておけばよい。
上記例ではPython用のshBrushPython.jsとXML(HTML)用のshBrushXml.jsを記述している。


投稿では

<pre class="brush: python">
def func(a, b):
    pass
</pre>

とpreのclassにブラシを指定してやるだけ。

alexgorbatchev.comに感謝。