SyntaxHighLighterの表示フォント
フォントはバージョンによって変わることはありませんが、SyntaxHighLightバージョンは3.2.1 カスタマイズしなければ使われているフォントは、V2系もV3系も font-family: Monaco, “Consolas”, “Bitstream Vera Sans Mono”, “Courier New”, Courier, monospace !important; のようになっています。フォントサイズは13px。本格的にプログラムコードを載せるわけではなく、Tips程度の小さめのコード(コーディング)なので、もう少し大きくてもいいかも。画像で見比べてみる
今回は実際にフォントを少しかえてそれをキャプチャしてみました。変えたフォントは、私が普段使っているDreqmWeaverというソフトにインストールしてあるフォントから選んでみました。プログラムコードの表示ですので見てくれよりは見やすさ重視で、例えば、0(ゼロ)、O(オー)、()かっこなどの違いが明確になっていたり、等幅フォントである、日本語と英数のサイズ的なバランスがいい等が気になります。さてみなさんはどの画像のフォントがいいとおもいますか?
フォントの変更のし方
今回フォントの見やすさの検証に使っているSyntaxHightLighterでフォントを変える場合は、wordpressのpluginsにインストールしてあるSyntaxHightLighterフォルダーの以下のCSSファイルを直接変更します。SyntaxHightLighterにはV2(バージョン2)系とV3(バージョン3)系の2系統があり、お好みで選んでください。 フォントの変更は、/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles/shCore.css (V2の場合)となります。
shCore.cssの位置
.syntaxhighlighter, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody { margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; background: none !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: "Courier New", Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 16px !important; /*min-height: inherit !important; *//* For IE8, FF & WebKit */ /*min-height: auto !important;*/ /* For IE7 */ direction: ltr !important; }
画像番号 | 使われているフォント |
画像1 | Monaco, “Consolas”, “Bitstream Vera Sans Mono”, “Courier New”, Courier, monospace |
画像2 | Verdana, Geneva, sans-serif |
画像3 | Georgia, “Times New Roman”, Times, serif |
画像4 | “Courier New”, Courier, monospace |