なんちゃって、IT生活。: ソースコードを表示させたい。preタグとcodeタグを使う方法。

プログラムやwebページのソースコードを上手いこと表示させたい…と思って、その方法をいろいろと調べました。今回は、preタグとcodeタグを使う方法です。このブログでは、実際には今回説明する方法を使っていないのですが、記録として残します。

preタグは、整形済みテキスト(preformatted text)を表します。この要素内のテキストは一般的に等幅フォントで表示し、ホワイトスペース (※1) はそのまま表示します。
※1 ホワイトスペース：スペース、タブ、改行のみで構成されたテキストの文字列のこと。

codeタグは、コンピューターコードの文字列を表します。この要素内のテキストはユーザーエージェント (※2) の既定の等幅フォントで表示されます。
※2 ユーザーエージェント：ブラウザー、ウェブページをスクレイピングするボット、ダウンロードマネージャー、その他のウェブにアクセスするアプリ等のこと。

例えば、

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>basic template</title>
    </head>
    <body>
        ...contents...
    </body>
</html>

という風に表示させるためには、

 <pre><code>&lt;!DOCTYPE html&gt;
 &lt;html lang=&quot;ja&quot;&gt;
     &lt;head&gt
         &lt;meta charset=&quot;UTF-8&quot;&gt;
         &lt;title&gt;basic template&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
         ...contents...
     &lt;/body&gt;
 &lt;/html&gt;</code></pre>

のように書きます。

「<」や「>」などのhtmlでの特殊文字は、「<」や「>」のようにエスケープしてやらないといけないのが、ちょっと大変ですね。

『HTMLの特殊文字をエスケープする変換ツール』なるページでは、htmlコードをコピペして「特殊文字を変換」ボタンをクリックすると、特殊文字をエスケープした文字列を出力してくれます。「<(不等号)」「>(不等号)」「&(アンパサンド)」「'(シングルクォーテーション)」「"(ダブルクォーテーション)」の5文字だけの変換のようですが、すごく便利ですね(^^)。