pre、codeタグを使ってソースコードを美しく表示する

<pre> <code>を使ってソースコードを表示させる手順は以下の通りです。

1. <pre> <code>の定義をスタイルシート(CSS)に記述する。
2. ソースコードの特殊文字を変換する
3. （補足）印刷用の<pre>定義

1. <pre> <code>の定義をスタイルシート(CSS)に記述する。

<pre> <code>をスタイルシート(CSS)に定義します。

<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;
}

backgroundで使う背景画像　（右クリックで画像を保存で利用してください）

2. ソースコードの特殊文字を変換する

記事を書くに当たって、<pre><code>～</code></pre>で囲まれた領域にソースコードを入力していきます。

<pre><code>入力領域

<pre><code>   ソースコード………………………   ソースコード………………………   ソースコード………………………</code></pre>

ソースコードで&, <, >, “ などの特殊文字があるときは、変換する必要があります。

変換が必要な文字コード例

この変換が大変ですが、自動的に変換してくれるJavaScriptを提供しているWebサイトがあります。大助かりでよく利用させていただいています。

特殊文字変換用JavaScript

上記サイトを用いて文字を変換後のソースコードを、<pre><code>～</code></pre>で囲まれた領域に入力します。

<pre> <code>を使ったソースコードの入力例

<pre><code>
&lt;mt:If name=&quot;datebased_archive&quot;&gt;     &lt;mt:Ignore&gt;&lt;!-- Title for category-monthly entry listings --&gt;&lt;/mt:Ignore&gt;     &lt;h1 id=&quot;page-title&quot; class=&quot;archive-title&quot;&gt;&lt;$mt:CategoryDescription$&gt;アーカイブ&lt;/h1&gt;
&lt;mt:Else&gt;      &lt;mt:Ignore&gt;&lt;!-- Title for category entry listings --&gt;&lt;/mt:Ignore&gt;      &lt;h1 id=&quot;page-title&quot; class=&quot;archive-title&quot;&gt;&lt;em&gt;&lt;$mt:CategoryDescription$&gt;&lt;/em&gt;の最近のブログ記事&lt;/h1&gt;
&lt;/mt:If&gt;</code></pre>

これにより実際の表示は以下のようになります。

<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>

3.（補足）印刷用の<pre>定義

ソースコードは印刷して見たい場合があります。

現在の<pre>定義では紙面よりはみ出した部分は印字されません。

実際にははみ出た部分は次行へ折り返して印字するほうが都合がよいと思います。

そんな時は以下のような印刷用の<pre>定義を追加しておくとよいと思います。

以下の定義は印刷用のスタイルシート(CSS)に記述してください。

印刷用<pre>の定義例

pre{
     white-space: pre-wrap;      /* CSS3サポートブラウザ向け (Opera8等) */
     white-space: -moz-pre-wrap; /* Firefox サポート用 */
     white-space: -o-pre-wrap;   /* Opera 7 サポート用 */
     white-space: -pre-wrap;     /* Opera 6 サポート用 */
     word-wrap: break-word;      /* IE サポート用 */
}

.layout-twt #alpha {
    width: 956px;  /*　中央カラムを紙面いっぱいに広げる */
}

#beta{
    display: none; /*　左サイドバーは印刷しない */
}

#gamma{
    display: none;　/*　左サイドバーは印刷しない */
}

印刷用のスタイルシートについては以下の記事が参考にしてください。

印刷用のスタイルシート(CSS)を指定する