プログラムコード表示フォントはどれがいい？！

作成日：2017-2-26

このブログは結構プログラムコードを参照するので、SyntaxHighLighterというプラグインを利用しています。ふと、なんだか見にくいと思ったので、別のフォントで表示して見比べてみた。

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の位置

下図の２５行目のfont-family行を変更してください。

.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