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を表示する方法

おすすめの記事

Apacheのmod_expiresでファイルタイプごとにキャッシュをコントロールする方法

Apacheのmod_expiresでファイルタイプごとにキャッシュをコント…

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決まり!

WordPressで手軽にAdblock対策するならBetter Stop AdBlockで決…

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

Web Fontの使い方とGoogle Fontsのオススメフォント 10選

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表示する方法

WordPressでアイキャッチ画像をサムネイルとして一覧ページに表…

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集…

インストールだけじゃない!yumの設定から便利な使い方まで徹底的に解説

インストールだけじゃない!yumの設定から便利な使い方まで徹底…

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

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

Adblock対策プラグイン「End of Adblock Cycle」を作成しました

Adblock対策プラグイン「End of Adblock Cycle」を作成しました


コメントを残す

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

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