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

おすすめの記事

ads.txtの設置方法を通して学ぶインターネット広告の問題点

ads.txtの設置方法を通して学ぶインターネット広告の問題点

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…

Windows 10でネットワークが不安定になった際の対策まとめ

Windows 10でネットワークが不安定になった際の対策まとめ

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャッシュの仕組み

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャ…

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

WordPressのサイトをHTTPS化して学ぶLet’s Encryptの使い方

Linuxの基本の基本。Linuxの基本的なディレクトリ構成

Linuxの基本の基本。Linuxの基本的なディレクトリ構成


コメントを残す

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

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