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

おすすめの記事

自前の国別IPv6、IPv4アドレス割当リストを作成しよう

自前の国別IPv6、IPv4アドレス割当リストを作成しよう

rsyslogを利用したログファイル作成と、logrotateを利用したログのローテーション

rsyslogを利用したログファイル作成と、logrotateを利用したロ…

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

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

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

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

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を作成しました

シンプルなスパムコメント対策プラグイン「Simple AntiSpam」を…

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成

iptablesの設定ファイルをシェルスクリプトを利用して動的に作成

開発の最前線でクリエイター・エンジニアに必要なプログラミング言語

開発の最前線でクリエイター・エンジニアに必要なプログラミン…

作業効率を飛躍的に向上させる!実務で使うIllustratorのショートカット一覧

作業効率を飛躍的に向上させる!実務で使うIllustratorのショー…


コメントを残す

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

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