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

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

Initializing...

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

shCore.cssの位置

下図の25行目の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;
}
画像と使われているフォント
画像番号 使われているフォント
画像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

上記テーブルのように、画像1はSyntaxHighLighter標準、あとの3枚はカスタマイズしたものです。画像をどれかクリックすれば横スクロール表示となり見比べやすいと思います。もし、ご意見ご感想があればコメントでもTwitterでもお寄せください。

画像1のフォント

画像1のフォント

画像2のフォント

画像2のフォント(画像中のフォント名間違ってます)

画像3のフォント

画像3のフォント

画像4のフォント

画像4のフォント

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク

最新の投稿

この記事がおすすめ!

ページ上部へ戻る