[Blogger] Chromeで Syntax Highlighter のレイアウトが崩れる

少し前に (2012/11頃）、Chrome で Syntax Highlighter のレイアウト が崩れる現象が起きて、 回避策を導入していたのでそのメモ。 発生していた症状は以下の２つ。

• 2ケタ以上の行番号が1文字づつに改行されてしまう。
  行番号として機能していない状態になっている。
• ソースコード側に予期しない改行が入ってしまうのだが行番号が増えない。
  結果として行番号がずれたり、後ろの方に行番号のない行ができたりする。

しばらく回避策を入れて様子を見てみたのだが最近は復旧しているようなので、 回避策を除去するついでに導入していた回避策をメモしておく。

[Blogger] Syntax Highlighter V3 に枠をつけたりとか。

前回の記事で、HTML/JavaScript ガジェットで Syntax Highlighter を設置するところまでできた。

• [Blogger] Syntax Highlighter V3 を JavaScript ガジェットで設置

Syntax Highlighter を設置した時はテーマに Midnight を選択していたが、ちょっとキツイのでデフォルトに戻すことにした。 だが、ページ背景が白で、Syntax Highlighter の背景も白なのでコード部分が目立たないというか境界がわからなくなってしまう。
そこでコード部分に枠をつけてみることにする。

[Blogger] Syntax Highlighter V3 を JavaScript ガジェットで設置

Syntax Highlighter 導入メモ第三弾。

前回、テンプレート HTML を直接編集するのを嫌って、CSS カスタマイズで Syntax Highlighter を導入しようとしたがあえなく失敗した。
今度は、JavaScript ガジェットでやってみたところうまくいったのでそのメモ。

基本的には CSS のロードさえ JavaScript の中からできればうまくいくはず。
ここのコードを参考にさせてもらった。

• 外部cssを動的に読み込む方法
  -- Born Neet --

[Blogger] Syntax Highlighter V3 を CSS追加から導入

前回、Syntax Highlighter V3 を導入してみた。

• Syntax Highlighter V3 を導入する

これはこれでうまく動作したのだが、テンプレート HTML を編集する必要がある。

あまり、テンプレート HTML をいじりすぎるとどこをどういじったかわからなくなるので、 なるべくテンプレートをいじりたくはない。

そこで、テンプレート カスタマイズの 「CSSを追加」で行けるか試してみた。
・・・ が、あえなく敗退。
今回はその敗退の記録。