2011年1月23日日曜日

BloggerでSyntaxHighlighterを利用する

ブログ上でプログラムの断片を表示する場合、シンタックス・ハイライト機能があれば見やすいですよね。ネットで調べると様々な方法が出てきますが、色々と現状(?)にあってない気もしたので、メモとっておきます。

・テンプレートに必要なjavascript・cssを読み込む

デザイン -> HTMLの編集 -> テンプレートの編集のheadタグの中に下記を記載。
ここではjavascriptとshのみ読み込んでいます。なうなヤングは、onloadはjqueryとかなんでしょうか?!

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.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'/>
<script type='text/javascript'>
  window.onload = function() {
  SyntaxHighlighter.autoloader(
    'js jscript javascript http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js',
    'bash shell http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js'
  );
  SyntaxHighlighter.all();
};
</script>

・投稿側でpreタグで囲む

<pre class="brush: js">
var x = 0;
</pre>

・参考
本家 http://alexgorbatchev.com/SyntaxHighlighter/ 対応している言語はこちらで調べて下さい。



0 件のコメント:

コメントを投稿