SyntaxHighlighterでConsolasを使うと日本語が文字化けする際の対処法


投稿日:2012年2月3日
  • 0
  • 0



SyntaxHighlighter EvolvedとConsolas、サイズ14pxの組み合わせで豆腐文字がでます

コードを見やすくハイライト表示してくれるSyntaxHighlighter。このサイトでも以前紹介しましたが、対応言語も多く、動作も早い「SyntaxHighlighter Evolved」を導入しているサイトが多いようです。

前から気になっていたのですが、特定の条件で日本語が文字化けするようです。どうやらコードの表示に使うConsolasというフォントと、14px(1em)の組み合わせで文字化が発生するようです。せっかくわかりやすく書いても、下の画像のように文字化けしたら意味がありません。

Consolasはコードを表示するには最適なフォントなので、変えたくありません。今回はサイズ変更して対応します。
追記:どうやらGoogle Chromeの特定のバージョンでConsolasを使った時だけ起こる現象のようです。仕方がないので「/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles47行目あたりフォントファミリーを以下の用に変更して対応しています。

  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;
}

以上の変更で下記のように文字化けが直りました。


現在のページを共有する



現在のページに関連する記事

WordPressにSyntaxHighlighterを導入しよう WordPressにSyntaxHighlighterを導入しよう
size.inc.phpのバージョンアップ size.inc.phpのバージョンアップ
WordPressで表(テーブル)を簡単に追加したい WordPressで表(テーブル)を簡単に追加したい
SyntaxHighlighterでConsolasを使うと日本語が文字化けする際の対処法 cssでfont-sizeを指定する際のpx、em、%の変換表
WordPressのデザインを更新 WordPressのデザインを更新
WordPressの整形済みテキストがはみ出す WordPressの整形済みテキストがはみ出す
SyntaxHighlighterでConsolasを使うと日本語が文字化けする際の対処法 PukiWikiにgooglemaps3を導入して、Google MAPを表示する方法

おすすめの記事

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

パソコン用メガネなんていらない!無料でできる5つの疲れ目対策

サーバで管理していたWordPressをローカル環境に移行する方法

サーバで管理していたWordPressをローカル環境に移行する方法

iptablesで設定したパケットフィルタリングが正しく動作しているかテスト

iptablesで設定したパケットフィルタリングが正しく動作してい…

Mac OS 9時代のIDE接続のHDDをMacDrive 10を利用してWindows 10で読み込む方法

Mac OS 9時代のIDE接続のHDDをMacDrive 10を利用してWindows 10…

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

Apacheのmod_rewriteモジュールの使い方を徹底的に解説

Linuxでサーバを構築するに当たって必要になる基礎知識

Linuxでサーバを構築するに当たって必要になる基礎知識

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスター…

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。