yamamoWorks

.NET技術を中心に気まぐれに更新していきます

ソースコードの色づけ

ブログなどにサンプルとしてソースコードを書く場合、キーワードなどに色がついてると見やすいですよね。

そのようなサイトはよく見かけるのですが、どうやって色をつけてるんでしょう?

投稿する時に function
というように自分で(あるいはツール等で)タグを付けてやればいいわけですが、それだとタグの部分もデータとして保存されるわけで、なんか嫌な感じがするのです。

そこで、表示する時に色をつけてやろうと思い JavaScript を書いてみました。


Code
Highlighter ダウンロード



  1. HTMLヘッダー部でスタイルシート(CodeHighlighter.css)を参照。
  2. HTMLボディー部でスクリプト(CodeHighlighter.js)を読み込む。
  3. タグ内にソースコードを書く。

すると、body.onload のタイミングで以下のように色づけがされます。
using System;

namespace yamamoWorks.CodeHighlighter
{
///
/// クラス
///

public class Sample
{
public Sample()
{
}

#region パブリックメソッド

public string Hello()
{
// 決まり文句
return "Hello World !";
}

#endregion
}
}

あ、ちなみに対応言語は C# だけです。

まあ、スクリプトを見れば改造して他の言語に対応するのは簡単でしょう。Stick out tongue