2008年4月3日木曜日

Bloggerでコードにハイライト

する方法を調べた。

いくつか方法はあるようだが、Googleがjavascriptを公開していた。
google-code-prettify

ダウンロードして解凍してできた
prettify.css
prettify.js
を使用すればよい・・・のだがBloggerではファイルをアップロードできないので単純に利用できない。

この記事↓
Blogger でも、コードハイライト してみる。by google-code-prettify
に方法が書いてあったが、どうもうまくいかない。
「ページ要素追加」でソース内容をべた書きした場合、bodyタグ内にソースが埋め込まれる。
bodyタグのonloadで関数を指定しているが、その宣言がbodyタグ内にある場合まだその関数は定義されて無いんじゃないかな・・・

たぶん、headタグ内に書けばいいと思い、 実際にprettify.cssとprettify.jsの中身をテンプレートの編集からheadタグ内にべた書きしてみたら うまくいった。

[レイアウト]→[HTMLの編集]のページでテンプレートを編集。
headタグの直下に上記2ファイルの内容をべた書きし、さらに↓のようにする。
<body onload='prettyPrint()'>

ただ、ソースの内容を本当にそのままコピペしたのではなくprettify.jsの先頭にあるコメント部分をコピーしなかった(というかコピーしたらエラーになった)。

で、ハイライトしたい場合は、
<pre class='prettyprint'>
  ここにコードを書く
</pre>
のようにして使う。

これで問題ないのだが、テンプレートを変更するたびに編集しなければいけない。

で、さらに調べていたらこんな記事があった。
Blogger でソースコードに色付けをする - google-code-prettify
このページではGoogle Page Creatorを利用する方法が紹介されていた。
なるほどこれは便利。Blogger利用者はGmailアカウントを持ってるだろうから、こっちの方がいいかな。
pre要素にスクロールバーを表示する設定も書いてあったがどうもうまくいかない。
↓によると、
pre要素にoverflow
どうやらIEのバグのようなのだが、widthを設定してあげてもスクロールバーは表示してくれない・・・。

0 件のコメント: