本文の中でソースコードとかを書くときの工夫

またしてもChitatopops からのネタです。

ソースコードを転記するとき、行末にいちいち<br /> とかを書くのが面倒で、色々工夫しつつもいまいちしっくりこなかったのですが、上記の設定ですっきり解決!! 以下のような設定で落ち着きました。


<pre>
<code>
「ソースコード本文」
</code>
</pre>

上記に対応したスタイルシート


pre {
width:100%;
overflow:auto;
overflow-y:visible;
font-family:"ヒラギノ角ゴ Pro W3", Osaka, Verdana, Arial, sans-serif;
font-size:small;
font-weight:normal;
line-height:130%;
color: #333333;
border:2px dotted #cccccc;
padding-top:0px;
padding-bottom:5px;
padding-left:10px;
padding-right:0px;
margin-top:10px;
margin-bottom:10px;
margin-left:0px;
margin-right:0px;
}
div.blogentry > pre {
width:auto;
}
code {
font-family:"ヒラギノ角ゴ Pro W3", Osaka, Verdana, Arial, sans-serif;
font-size:small;
line-height:130%;
}

“<pre>” タグを使うと改行をしなくなるのですが、”width:100%;”、”overflow:auto;” とすることで長くなった場合はインラインでスクロールバーを出すようにしてくれます。縦スクロールバーはいらないので、”overflow-y:visible;” で消してみたつもり。

シェアする

フォローする