2009/09/06

Syntax Highlighterでコードをきれいに魅せる

ブログにコードを載せる時、普通にpre, tableタグなどで囲って表示するより、その言語のsyntaxをハイライトして表示する方がはるかに見やすくなります。

以下のJavaコードを見てもらうとわかりますが、public, class, static, voidといったJava特有のキーワードがハイライトされている上、行番号もついているのでコードについて解説するときも便利かと思います。

public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}

この機能を提供してくれるライブラリが以下のSyntax Highlighterです。
http://alexgorbatchev.com/wiki/SyntaxHighlighter

GoogleCodeにもプロジェクトがありますがなぜかバージョンが1.5で止まっています。

Syntax HighlighterはJava ScriptとStyle Sheetからなっていて、HTMLソース中に

<pre class="brush: java">
public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}
</pre>

のようなタグを見つけると、指定されているclassの値に応じてその内容をデコレーションしてくれます。

まずはローカルのHTMLファイルで実験してみます。
以下のHTMLをファイルとして保存してブラウザで開いてみてください。
コード領域にカーソルを合わせた時に右上にアイコンが表示されますが、これのview sourceまたはcopy to clipboardを利用するとよいでしょう。

<html>
<head>
 <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js"></script>
 <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js"></script>
 <script type="text/javascript">
  SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
  SyntaxHighlighter.all();
 </script>
 <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css"/>
 <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css" id="shTheme"/>
</head>

<body>
<pre class="brush: java">
public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}
</pre>
</body>
</html>

ここでは、shBrushJava.jsのみ読み込んでいますが、他にもC++,C#,PHP,Perl,Python,JScript,XML,HTML,Plain textなどなど、多くの言語に対応しています。

対応している言語の一覧は以下にあります。
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes

HTML中で参照されるscripts, stylesについてはまとめてダウンロードできるので、自分のコンテンツとともにサイトにアップロードして使うこともできます。
今回はブログで使用するので配布元でホストしているものを使用しています。

今度はこれをBloggerに組み込んでみます。
BloggerのアカウントSign Inして、Layout - Edit HTMLを選択するとテンプレートを編集することができます。
ここで、テンプレートの最後の方の<!-- end outer-wrapper -->と</body>の間に以下のHTMLを埋め込んでください。

<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf&#39;;
  SyntaxHighlighter.all();
</script>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' id='shTheme' rel='stylesheet' type='text/css'/>

そしてブログ本文中に

<pre class="brush: java">
public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}
</pre>

のように記述するとコードがハイライトされて表示されます。
注意点としてはPreview画面ではハイライトが有効にならないので、確認するにはPublishする必要があります。

さて、これでコードをブログに載せる準備が整いました。
これから趣味のコードを紹介していきたいと思います。
投稿者 時刻:
ラベル: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)