Selection 9: Bloggerで急にSyntaxHighlighterの挙動がおかしくなったので調べてみた

2012年8月7日火曜日

Bloggerで急にSyntaxHighlighterの挙動がおかしくなったので調べてみた

この記事を書いている現在(2012/8/6)、BloggerでSyntaxHighlighterの挙動がおかしい。

何処がおかしいのか

気付いているのは以下

行番号が2桁になると潰れて表示される
変な箇所で改行がはいっている(これは良くわからないけど最後のセミコロンのみ改行されていたり)

1点目は以下のような感じ。これでは逆に読みづらくなってしまう。

CSSを見てみる

どうも怪しいのは、 http://agorbatchev.typepad.com/pub/sh/3_0_83/styles/shCore.css に定義されている以下の箇所。

.syntaxhighlighter table td.gutter .line {
  padding: 0 0.5em 0 1em !important;
}

この定義の「padding」の値がちょっとBloggerとの相性が良くないっぽい。この値は行番号の上下左右の空白サイズを定義しているが、さにその外側を定義している「td.gutter」のwidth定義値よりも大きくなってしまっているため結果的に2桁の行数になると改行されて表示されてしまっている。ちなみに、「td.gutter」のwidth値はautoとなっているので他のレイアウトに影響されて値が確定されていると思う。

何が原因なのよ

今まで動いていたので、このCSSが更新されたのか(更新履歴を見る限り最近更新されていない)、 Bloggerのテンプレートが更新されたのかのどちらかだと思われるのだが、それもなさそう。
とここで気が付きました。ブラウザです。自分はOS X(10.8)でGoogle Chrome(現在のVersion：21.0.1180.57) を使用していますが、試しにSafariで見てみたら全く問題なかった。うーん、そういうことだったのか、試しに SyntaxHighlighterを使用している他のブログも見てみましたが、Chromeで見るとダメで、SafariはOKでした。 IEは今Mac使っているので試せません。

対処

あくまで暫定的ですが、CSSを定義しなおして対処します。 SyntaxHighlighterを使うには以下のCSSファイルを読み込んでいると思いますが、その定義の直後に該当のCSS定義を上書きします。

/* SyntaxHighlighterを使っている方はこの定義をしているはず */

/* 以下の定義を追加して上書き */

あくまで暫定。でも問題の1点目が改善されるだけ。2点目の変な所で改行される問題はこの対処では治りません。現に上のコードをChrome上で見ると、2行目が改行されちゃって3行目としてカウントされてしまい、コードの最終行に行番号が表示されていません。個人的にこの2点目の問題はそれほど重症では無いので放置ｗ