2011年2月26日土曜日

bloggerでSyntaxHighlighter

手始めに記事上のコードを見やすくするために、SyntaxHighlighterを導入してみる。

いろいろやり方はあるみたいだけど、今回はこちらの方の記事を参考にさせてもらった。
使用したい言語を追加しつつ、headタグ内に以下のコードをペースト

<!--start SyntaxHighlighter--> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.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 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"
     ,"css                      http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js"
     ,"html xml xhtml           http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"
     ,"cpp c                    http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"
     ,"java                     http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js"
     ,"actionscript3 as3        http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js"
     ,"php                      http://alexgorbatchev.com/pub/sh/current/scripts/hBrushPhp.js"
  );
  SyntaxHighlighter.all();
};
</script> 
<!--end SyntaxHighlighter-->

これで準備完了。あとは、投稿画面のHTMLの編集で、コードを以下のようにpreタグで囲ってやる。
brush:のあとのhogeに言語に対応した名称を入れてやればいい。
<pre class="brush:hoge">
コードを記述...
</pre>

あと、htmlの記述にこちらの変換ツールを使用させてもらった。便利。

jsをアップロードしておきたいんだけど、どこにおけばいいんだろ?

0 件のコメント:

コメントを投稿