編集に纏わるこぼれ話や日々感じたことなどを、つらつらと。

iioka＠人生色々
です。

CodeZine編集部ブログでは、ソースコードに自動的に色づけしてくれるツール、
「google-code-prettify」を使用しています。

・google-code-prettify - Google Code

google-code-prettifyはCSSとJSのセットで、
ページロード時にpreタグに囲まれた内容をJavaScriptで色づけしていく仕組みになっています。
プログラミング言語を自動的に判別してくれるので、とても便利。

ところで、
最近では安定した挙動のgoogle-code-prettifyなんですが、
相変わらず環境設定に手こずる自分は、
今回のgoogle-code-prettify導入にも、もれなく手こずってしまいました。
（すでに導入されたブロガーさんたちの記事も読んだんですが、それでも手こずったさ）

ということで以下、メモです。
なお、これはCodeZine編集部ブログの環境だから起きたことかもしれないので、
他の環境では無問題かもしれません。
ご参考までに。

・small版を導入すると「null」とか言われる。
google-code-prettifyは普通のバージョンと、コメントやスペースを除去した「small」版が公開されているのですが、
small版を入れると、色づけに失敗し、preタグの中に「null」と表示されてしまいました。
対策：通常版を導入し、コメントを適当に削除して使いました。

・主にFirefoxで変な改行が混じる
ソースコードの頭と後ろに改行が混じってしまいました。
対策：preタグ直後からソースを書き始める。

<pre class="prettyprint">
public…

ではなく、

<pre class="prettyprint">public…

と書く。行末も同じく、ソース終了直後に閉じタグを記述。

・それでも主にFirefoxで変な改行が混じる
文頭のみならず文中にも改行が混じってしまう。
対策：preタグの前に改行を加える。

これは、google-code-prettifyというよりもブログツールが原因かもしれません。
文章を書いてて、次の行にpreタグを書いてしまうとダメみたいです。
なので、

…というソースは以下のようになります。
<pre class="prettyprint">public…

ではなく、

…というソースは以下のようになります。
（改行）
<pre class="prettyprint">public…

としたほうがいいみたいです。閉じタグの後も改行しました。

・レンダリング遅くて困りんぐ
多くのブロガーさんが指摘していましたが、bodyタグのonloadで関数を呼ぶようにすると
ページ全てを読み込むまで待つため、遅くなってしまうようです。
対策：閉じbodyタグの直前で関数を呼ぶ。

ただし、CodeZine編集部ブログでは、左ペイン、中ペイン、右ペインの順にロードするので、
右ペインロード直前で関数を呼ぶようにしました。

この後、運用してて特に問題がなければCodeZine本体でもgoogle-code-prettifyを使いたいなと思います。
その際、リアルタイムでJavaScriptを実行するわけではなく、
あらかじめ実行したHTMLをパブリッシュしておき、表示するようにすれば、
今まで通りのスピードで表示できるかな、とか考えてます。

みなさんも、ぜひ使ってみてはいかがでしょうか。