Bloggerにコードハイライトを導入する上でハマったところがあるのでメモ
- Syntax Highlighter Scripts Generator で必要な言語をチェックして、下記のようなコードを生成する。
- 上記のHTMLコードをBloggerの「テンプレート」→「HTMLの編集」→「続行」で開いたHTMLの</head>の直前にコピー
-
導入完了
<pre class="brush: cpp;"> int main(){ printf("hello world!"); } </pre>
上記のように書くと下記のように表示される
int main(){ printf("hello world!"); }
<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>
しかし、Google Chromeで二桁の行番号が改行されてしまう(2012/10/31現在)
shCore.cssを変更せずChromeで表示した場合 |
http://code.google.com/p/chromium/issues/detail?id=140868 によるとGoogle Chromeに、左右のpaddingの合計が整数のpx出ない場合に表示がおかしくなるという不具合があることが分かった。その為、下記の対応を行うことで回避することができる。
-
「テンプレート」に追加したHTMLコードのうちshCore.cssを追加している行を削除
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
- shCore.cssはコードの中身を直接コピー後Bloggerの「テンプレート」→「カスタマイズ」→「アドバンス」→「Add CSS」に直接貼り付け
-
貼り付けした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の合計が整数になれば問題ない。