ソースコードを書くときのスタイルシート

最近ソースコードを書く機会が時々あるので、HTMLとCSSを整備してみました。

実体参照への変換は、今までDreamweaverのデザインビューにペーストして、コードビューで変換されたものを使っていたんだけど、<br />が入っちゃうんですよね。

なのでakiyanの以下のページを使うことにしました。自分で作ろうかな、とも思ったけど、これが便利だからいいかな。

ソースは以下のようにしました。

HTML

<span class="small">ソースコードのキャプション</span>

<div class="codex"><pre><code>ソースコードが入ります</code></pre></div>

CSS

pre {
	margin:0;
	padding:0;
	overflow:auto;
	white-space:pre-wrap;
	word-wrap:break-word;
}
.codex {
	font-family:"Monaco","Courier",monospace;
	border:solid 1px #DfDfDF; 
	padding:10px; 
	background:#f4f9fb; 
	line-height:18px;
	margin-bottom:20px;
	font-size:11px;
}
code,
span.small {
	font-family:"Monaco","Courier",monospace;
	font-size:11px; 
	color:#000;
}

ソースコードは右にはみ出た時の対処が重要ですが、スクロールバーを出すのはいまいち使いづらいので、改行させることにしました。Win IEでも上記のCSSで問題ないですね。

参考にしてみてください♪