n46さんに指摘いただいて調査した結果、google-code-prettifyとIEの相性が悪いことが判明。 結局IEのみgoogle-code-prettifyを使用しないように逃げたのですが、以下悪あがきした経緯を書いておきます。 コード部分の改行が全て削除されてしまうというもの。 こちらを参照するとどうもIEが悪いっぽい。
Favorite Labo - google-code-prettify
ここを参考にさせてもらいました。 ただし現在のバージョン（prettify_31_Aug_2007）ではいじる場所が少し違い990行目を修正。 修正に関して、JavaScriptに疎いため知人に助言をもらいました。 （guccyon, fujioka0729ありがとう！）
prettify.js修正前
pre.innerHTML = newContent;
prettify.js修正後
pre.innerHTML=(/*@cc_on!@*/false) ? newContent.replace(/<br\s?\/?>/g, ' <br/>') : newContent;
ブラウザ判定方法がやや特殊ですが、毎回読み込まれ実行されるため、コード量や処理負荷をできる限り減らそうという意図があります。 <br>だけではなくて、<br/>や<br />（/の前に空白あり）にも対応させました。 また、僕はサイズ縮小版のprettify-small_31_Aug_2007を使用しているので、そちらの場合の修正ポイントも書いておきます。 修正箇所はprettify.jsファイルの中をinnerHTMLでテキスト検索していって一番最後に見つかった部分です。最終行である18行目の後ろのほうを以下のように修正しました。
prettify.js修正前
～（省略）～l.innerHTML=m;～（省略）～
prettify.js修正後（上記のl.innerHTML=m;部分を以下に置き換え）
l.innerHTML=(/*@cc_on!@*/false) ? m.replace(/<br\s?\/?>/g, ' <br/>') : m;
で、これでとりあえずいけるかと思ったけど・・・ダメだったと（実際は少し惜しかった）。 日本語表示行の改行ができない。<br>タグすらないと思われる。 それを調べるためにMicrosoft提供のIE版FirebugのようなものInternet Explorer Developer Toolbarなんてものを入れたりして格闘しました。
また、この修正でもIEでコード部分をコピペした場合、やはり改行が削除されてしまうという問題は解決していません。 ということでFavorite Laboの中の人は導入を見送ったみたいです。 そこで後から知ったことだけど、dan kogai氏も同じ問題に対してIEのみオフという対処をしたようなので（参照：404 Blog Not Found - google-code-prettify vs IE 6）、僕も同じ手段を取りました。 IEかどうかの判定部分は知人のアドバイスを受け入れdan氏とは少し違う方法を取りました。
if (1 /*@cc_on -1 @*/)
ではなく
if (/*@cc_on!@*/true)
という方法。数値型を真偽値にキャストするコストを抑えるため、らしい。そういう風に解釈した。間違ってないよね？ そして以前google-code-prettifyの導入時に、bodyタグのonLoadで２つの関数を実行しているので、そこを丸ごとこのif文で囲みました。
<body onload="if (/*@cc_on!@*/true){prettyPrepare();prettyPrint();}">
とりあえずこれで逃げます。 指摘くださったn46さん、ありがとうございました。
関連するエントリー [未解決] google-code-prettifyを使用するとIEで改行が表示されない
トラックバック:1 Trackback
- トラックバック URL
- http://blog.garden-place.jp/action.php?action=plugin&name=TrackBack&tb_id=118
- Listed below are links to weblogs that reference
- [未解決]google-code-prettifyを使用するとIEで改行が表示されない from Web 酒 肴