2007年03月28日

ソースコードを色分けする google-code-prettify を過去記事を書き換えないで導入する方法

ハイライトもGoogle流 - "google-code-prettify"でソースコードに色付けを (MYCOMジャーナル)
を見て google-code-prettify を導入してみた。

ただ、pre タグか code タグに class="prettyprint" をつけなくてはいけないので、過去記事に適用させるには書き換えなくてはいけない。

ソースコードを貼った記事もそれほど多くないような気もしますが面倒なので自動で code タグに class="prettyprint" を設定するようにしてみました。ただし、ソースコードを code で囲っている場合です。

取り合えず code タグに class prettyprint を設定する部分のソースを貼っておきます。これを onload イベントなどに加えてから、prettyPrint() を呼び出すようにすれば大丈夫ではないかと思います。

var code = document.getElementsByTagName("code");
if (code.length) {
  for (var i = 0; i < code.length; i++) {
    code[i].className = "prettyprint";
  }
}

あと、Seesaa の場合は文字コードが shift_jis なので、script を読み込む時に charset="UTF-8" とするといいようです。
具体的にはこんな感じです。

<script type="text/javascript" src="prettify.js" charset="UTF-8"></script>

src の部分は実際 script がある場所に書き換える必要があります。

posted by knit at 21:06 | Comment(0) | TrackBack(2) | JavaScript
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバック

google-code-prettifyでソースをハイライトする方法
Excerpt: 仕事柄、分からない事があるとすぐにネットで調べるんですが、そうした時に公開されているソースに色が付いているブログをよく見かけます。あれ綺麗で見やすいので実装したいなーと...
Weblog: Astrodeo
Tracked: 2008-01-17 20:09

プログラマはSeesaaブログを使ったほうがよいと思う5つの理由
Excerpt: 今回bloggerからSeesaaへブログを移転したのですが、移転した理由を書いていきたいと思います。 1.独自ドメインを設定できる これは独自ドメインのほうがかっこいいよね覚えやすいよね、という..
Weblog: そーれどーんとやってみよう
Tracked: 2009-12-14 11:43