ソースコードを記事の中で表示するためには、<pre>, <code>タグを組み合わせが一般的に使われています。
ここではSoh Tanakaで示されているデザインを参考に<pre> <code>を使ったソースコードの表示方法をご紹介します。
<pre> <code>のCSS定義例
pre {
font-size: 12px;
padding: 0;
margin: 0;
background: #f0f0f0;
border: 1px solid #ccc;
line-height: 20px; /*--Height of each line of code--*/
background: url(pre_code_bk.png) repeat-y left top; /*--Background --*/
width: 600px;
overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
overflow-Y: hidden; /*--Hides vertical scroll created by IE--*/
}
pre code {
margin: 0; /*--Left Margin--*/
padding-left: 5px;
display: block;
}
<pre> <code>を使ったソースコードの表示例
<mt:If name="datebased_archive">
<mt:Ignore><!-- Title for category-monthly entry listings --></mt:Ignore>
<h1 id="page-title" class="archive-title"><$mt:CategoryDescription$>アーカイブ</h1>
<mt:Else>
<mt:Ignore><!-- Title for category entry listings --></mt:Ignore>
<h1 id="page-title" class="archive-title"><em><$mt:CategoryDescription$></em>の最近のブログ記事</h1>
</mt:If>