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

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

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

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

---

原因は、どうも Chrome が CSS を解釈する際の Padding の解釈に起因していた模様。
Syntax Highlighter は 「 3.0.83 (July 02 2010) 」 のままなので、 Chrome 側のリリースに基づく模様。また、現在問題がないのも Chrome が何か修正したのだろうか？

回避策は、Syntax Highlighter の スクリプトを記述した後に

<!-- for Chrome -->

<style type="text/css">
  .syntaxhighlighter table td.gutter .line {
   padding: 0 6px 0 13px !important;
  }
  .syntaxhighlighter table td.code .line {
   padding: 0 !important;
  }
  .syntaxhighlighter .gutter {
   padding-right: 1em !important;
  }
  .syntaxhighlighter table {
   padding-bottom: 1px !important;
  }
</style>

を記述している。 今、このページでは、HTML/Script ガジェットで書いているので、 カスタマイズ分を含めるとこんな感じ。

<script type='text/javascript'>
  function loadCss(url) {
    var headElem  = document.getElementsByTagName('head')[0]
    var linkElem =document.createElement("link")
    linkElem.rel = "Stylesheet"
    linkElem.type = "text/css"
    linkElem.href = url
    headElem  .appendChild(linkElem)
  }
  loadCss("http://alexgorbatchev.com/pub/sh/current/styles/shCore.css");
  loadCss("http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css");
</script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type='text/javascript' ></script>

<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"  ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" ></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" ></script>
<script language='javascript' type="text/javascript"><!--
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.defaults['toolbar'] = false;
  SyntaxHighlighter.defaults['class-name'] = 'syntaxhighlight' ;
  SyntaxHighlighter.all();
// -->
</script>

<!-- for Chrome -->

<style type="text/css">
  .syntaxhighlighter table td.gutter .line {
   padding: 0 6px 0 13px !important;
  }
  .syntaxhighlighter table td.code .line {
   padding: 0 !important;
  }
  .syntaxhighlighter .gutter {
   padding-right: 1em !important;
  }
  .syntaxhighlighter table {
   padding-bottom: 1px !important;
  }
</style>

<style type="text/css">
.syntaxhighlight {
border:3px solid #bbbbff;
width:auto;border-radius:5px;
padding: 3px 0px;
}
</style>

---

最近の Chrome のWindows Platform の Stable アップデートを見るとこんな感じになっている。

2012年12月

Release	version
2012/12/17	23.0.1271.101
2012/12/11	23.0.1271.97

2012年11月

Release	version
2012/11/29	23.0.1271.95
2012/11/26	23.0.1271.91
2012/11/06	23.0.1271.64

Chrome は頻繁にアップロードされているので何が原因なのかわからないが、 少なくとも本件に関する記述はざっと見たところなさそうな感じ。

---

本回避策に関しては、

• ChromeでSyntaxHighlighterの表示が崩れる問題の対処方法
  - blog 渓鉄 -

を参考にさせていただきました。