SyntaxHighlighter EvolvedとConsolas、サイズ14pxの組み合わせで豆腐文字がでます
コードを見やすくハイライト表示してくれるSyntaxHighlighter。このサイトでも以前紹介しましたが、対応言語も多く、動作も早い「SyntaxHighlighter Evolved」を導入しているサイトが多いようです。
前から気になっていたのですが、特定の条件で日本語が文字化けするようです。どうやらコードの表示に使うConsolasというフォントと、14px(1em)の組み合わせで文字化が発生するようです。せっかくわかりやすく書いても、下の画像のように文字化けしたら意味がありません。
Consolasはコードを表示するには最適なフォントなので、変えたくありません。今回はサイズ変更して対応します。
追記:どうやらGoogle Chromeの特定のバージョンでConsolasを使った時だけ起こる現象のようです。仕方がないので「/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles」47行目あたりフォントファミリーを以下の用に変更して対応しています。
font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','MS ゴシック','MS Gothic','Osaka', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;
対処法
(この対処法でも直ることもありますが、上の追記の方法を使うのが一番確実な解決法です)
wordpressのルートディレクトリ「/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles」にある「shCore.css」を開きます。(バージョン2を使っている場合はsyntaxhighlighter2フォルダを参照してください)50行目あたり
font-style: normal !important; font-size: 1em !important; /*min-height: inherit !important; */
フォントサイズを14px(1em)以外にします。今回は「0.99em」としました。
font-style: normal !important; font-size: 0.99em !important; /*min-height: inherit !important; */
番号の行間も合わせて変えておきます。110行目当たり
.syntaxhighlighter table td.gutter .line { text-align: right !important; padding: 0.3em 0.5em 0.3em 1em !important; }
0.3emを下のように0.2emへ変更します。
.syntaxhighlighter table td.gutter .line { text-align: right !important; padding: 0.3em 0.5em 0.2em 1em !important; }
以上の変更で下記のように文字化けが直りました。