SyntaxHighLighterの表示フォント
フォントはバージョンによって変わることはありませんが、SyntaxHighLightバージョンは3.2.1 カスタマイズしなければ使われているフォントは、V2系もV3系も font-family: Monaco, “Consolas”, “Bitstream Vera Sans Mono”, “Courier New”, Courier, monospace !important; のようになっています。フォントサイズは13px。本格的にプログラムコードを載せるわけではなく、Tips程度の小さめのコード（コーディング）なので、もう少し大きくてもいいかも。画像で見比べてみる
今回は実際にフォントを少しかえてそれをキャプチャしてみました。変えたフォントは、私が普段使っているDreqmWeaverというソフトにインストールしてあるフォントから選んでみました。プログラムコードの表示ですので見てくれよりは見やすさ重視で、例えば、０（ゼロ）、O(オー）、（）かっこなどの違いが明確になっていたり、等幅フォントである、日本語と英数のサイズ的なバランスがいい等が気になります。さてみなさんはどの画像のフォントがいいとおもいますか？
フォントの変更のし方
今回フォントの見やすさの検証に使っているSyntaxHightLighterでフォントを変える場合は、wordpressのpluginsにインストールしてあるSyntaxHightLighterフォルダーの以下のCSSファイルを直接変更します。SyntaxHightLighterにはV2（バージョン２）系とV3(バージョン３）系の２系統があり、お好みで選んでください。 フォントの変更は、/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;
}
| 画像番号 | 使われているフォント |
| 画像１ | Monaco, “Consolas”, “Bitstream Vera Sans Mono”, “Courier New”, Courier, monospace |
| 画像２ | Verdana, Geneva, sans-serif |
| 画像３ | Georgia, “Times New Roman”, Times, serif |
| 画像４ | “Courier New”, Courier, monospace |
画像１のフォント
画像２のフォント（画像中のフォント名間違ってます）
画像３のフォント
画像４のフォント