2011年8月23日火曜日

ソースコードをそのまま表示する

ソースコードをそのまま表示したいときには、<pre><code> と </code></pre> で囲めばよいのですが、この中でも “ <” と “>” は解釈されてしまうので、“&lt;” と “&gt;” に変換する必要があります。

この変換作業をやってくれる Blogtool という便利な Web サービスがあります。

ブログに表示したいソースコードを、この Blogtool のボックスに貼り付けて、ボタンをクリックすると、必要な変換をやってくれます。

さらに見やすくするために、表示したソースコードを枠で囲みたいと思って、色々検索したところ、hata さんの「文章を枠で囲む」を見つけました。

下記のコードを、テンプレートのスタイルシートの最後に貼り付けておくと、<pre><code> と </code></pre> で囲んだ部分に枠が付き、背景が淡いグレーで表示されます。

ちなみに、赤字部分は削除しました。幅を指定すると、テンプレートの表示がくずれるので。

pre {
  font-family: "Courier New",Courier,monospace;
  border: 1px solid #dddddd;
  background-color: #f9f9f9;
  color:#000070;
width: 500px;
  overflow: auto;
  white-space: pre;
  padding: 2px 2px 2px 2px;
  margin-left: 10px;
}
pre code {
    margin: 0;
    padding-left: 5px;
    display: block;
}
pre br {
  display:  none;
}


★ おさらい

ブログにソースコードをそのまま表示したい場合は:

1. スタイルシートに hata さんのコードを貼っておきます。
Blogger の場合は、[デザイン]-[HTML の編集]を開き、

]]>
    </b:template-skin>

という行の前に挿入します。ここに貼っておけば、テンプレートを変更しない限り、有効です。背景画像を変更しても大丈夫。

2. ブログに貼りたいソースコードを Blogtool ページで変換します。

3. 変換したソースコードを <pre><code> と </code></pre> で囲んで投稿します。オシマイ。

0 件のコメント: