2012年1月26日木曜日

Syntax Highlighterでソースコードハイライト

  • このエントリーをはてなブックマークに追加

ソースコードをハイライトするために、Syntax Highlighterを導入。

(Syntax Highlighterを簡単に挿入するためのタグを生成してくれるツールはここ)


で、生成したタグがこちら。

<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 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><script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.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/shBrushSql.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>

これをBloggerのメニューからhead部分に挿入。
Bloggerメニュー→テンプレート→htmlの編集→続行→</head>の上に挿入

で、後はソースコードをこんな感じで書けば大丈夫。
<pre class="brush:html;">
htmlエンティティーしたタグとか
</pre>

ちなみになぜか最初うまくいかないなーって思ってたら、
brushのスペルがblushになってた。
初歩的ミスには要注意。

Adsense