[HTML][CSS]Bloggerにコードハイライトを追加する

Bloggerにコードハイライトを導入する上でハマったところがあるのでメモ

1. Syntax Highlighter Scripts Generator で必要な言語をチェックして、下記のようなコードを生成する。

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
 SyntaxHighlighter.config.bloggerMode = true;
 SyntaxHighlighter.all();
</script>

2. 上記のHTMLコードをBloggerの「テンプレート」→「HTMLの編集」→「続行」で開いたHTMLの</head>の直前にコピー

3. 導入完了

   <pre class="brush: cpp;">
    int main(){
     printf("hello world!");
    }
   </pre>
   

   上記のように書くと下記のように表示される

    int main(){
     printf("hello world!");
    }
   

しかし、Google Chromeで二桁の行番号が改行されてしまう(2012/10/31現在)

shCore.cssを変更せずChromeで表示した場合

http://code.google.com/p/chromium/issues/detail?id=140868 によるとGoogle Chromeに、左右のpaddingの合計が整数のpx出ない場合に表示がおかしくなるという不具合があることが分かった。その為、下記の対応を行うことで回避することができる。

1. 「テンプレート」に追加したHTMLコードのうちshCore.cssを追加している行を削除

   <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
   

2. shCore.cssはコードの中身を直接コピー後Bloggerの「テンプレート」→「カスタマイズ」→「アドバンス」→「Add CSS」に直接貼り付け
3. 貼り付けしたshCore.cssコードのうち下記の部分を変更する

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

   を下記に変更

   .syntaxhighlighter table td.gutter .line {
     text-align: right !important;
     padding: 0 6px 0 13px !important;
   }
   

解説

行番号のデフォルト文字サイズが13pxなのでpadding-rightが0.5emだと6.5pxとなり、整数とならない。そこで、今回の変更では6pxとしている。それ以外の値でも左右のpaddingの合計が整数になれば問題ない。