2013/08/21

pre要素とcode要素を使ってブラウザ上にソースコードをそのまま表示する方法

HTMLなどのソースコードをブラウザにそのまま表示する方法。pre要素とcode要素

HTMLのpre要素とcode要素についてご紹介したいと思います。

ブログなどを書いている時、HTMLやCSSなどのソースコードをそのまま埋め込みたいと思ったことはありませんか?
それを実現できるのが、pre要素code要素です。
ソースコードを表示させる場合だけではなく、アスキーアートを作る際などにも使用されています。

目次

pre要素とcode要素

code要素

computer codeの略で、コンピュータ用のソースコードであることを示す要素です。
要素内の文字列がプログラムのソースコードであることを明示的に示し、一般的なブラウザでは等幅フォントで表示されます。
ソースコードを表示するときには、pre要素の中にcode要素を入れてセットで使用するのが一般的です。

pre要素

preformatted textの略で、整形済みのテキストであることを示す要素です。
整形済みというのは、範囲内には無駄なスペースやタブなどがないことを意味します。
通常はスペースの連続、改行、インデントなどはひとつの半角スペースにまとめられてしまいますが、この要素を使うと記述した通りの形で表示されるようになります。

ソースコードを表示する場合以外にはアスキーアートや短歌、俳句を書く際にも使用されます。
この要素内でタグを表示したい場合は、「>」「<」「&」などはエスケープする必要があります。

エスケープ前エスケープ後
&&amp;
<&lt;
>&gt;

code要素を使ってみる

code要素は一部分のみに使う場合は、pre要素とセットではなく、単独で使います。

<p>
<code>code</code>要素を使ってみる。
</p>

【プレビュー】

code要素を使ってみる。

<code></code>で囲った部分は等幅フォントになっています。
短いコードを表示する場合にはpre要素とセットではなくこのように使用します。

pre要素とcode要素をセットで使ってみる

プログラムのソースコードであることを示すのにはcode要素を使用します。
しかしソースコードの多くには空白やインデントを使用しますので、そのまま保持するためにpre要素と併用します。

<pre>
<code>
body{
    color:#fff;
    background-color:#000;
    font-size:1em;
}
</code>
</pre>

【プレビュー】

body{
    color:#fff;
    background-color:#000;
    font-size:1em;
}

「>」「<」「&」等は、タグとして解釈されてしまうので、これらの記号を表示させたい場合はエスケープする必要があります。

まとめ

ソースコードを埋め込みたい場合はこの方法を覚えておくと便利です。
CSSやjQueryを使っての、見た目の装飾もできるので、今後ご紹介したいと思います。