category:
Technology
Back to Blog Index
ソースコードを書くときのスタイルシート
最近ソースコードを書く機会が時々あるので、HTMLとCSSを整備してみました。 実体参照への変換は、今までDreamweaverのデザインビューにペーストして、コードビューで変換されたものを使っていたんだけど、<br />が入っちゃうんですよね。 なのでakiyanの以下のページを使うことにしました。自分で作ろうかな、とも思ったけど、これが便利だからいいかな。 HTML実体参照変換 ソースは以下のようにしました。 HTML
<span class="small">ソースコードのキャプション</span>
<div class="codex"><pre><code>ソースコードが入ります</code></pre></div>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;
}