HTMLファイルにソースコードを埋め込み、表示する方法

codeタグとpreタグの使い方

まずはソースコードの記事を書く上で基本となるcodeタグとpreタグについてご紹介します。

codeタグ

codeタグはこのタグで囲まれたものがソースコードであることを意味します。

h1タグの使い方は<code><h1>見出し1</h1></code>です。
                        

このように、ソースコードを意味する文章はcodeタグで囲みます。 上記はHTMLのh1要素を囲んでいる例ですが、どのプログラミング言語でも同じです。

preタグ

preタグは半角スペースや改行などをそのまま表示するタグです。

通常、HTMLファイルに半角スペースや改行などを記述してもそのまま表示されずに、 以下のような変換が勝手に行われてブラウザに表示されます。

よって、半角スペースを複数使う場合や改行をそのまま出力したい場合はpreタグで囲む必要があります。 具体的な使用場面はプログラミングのソースコードを紹介するときなどですね。 これは次項でご紹介します。

ソースコードを表示させる

記事内でソースコードを表示させるにはpreタグとcodeタグの両方を使います。 例として、JavaScriptのソースコードを紹介する場面を考えてみましょう。

HTMLファイル内でJavaScriptのソースコードを紹介するには以下のように書きます。

<pre><code>

    var tmp = document.getElementsByClassName("hoege") ;
    var char="testID";
    tmp[0].setAttribute("id",char);

</code></pre>

codeタグを使うことで囲まれた範囲がソースコードであることを明示します。さらにpreタグで改行・半角スペースをそのまま表示させます。 ちなみに、preタグを使用しないと以下のようになります。

改行や空白が自動的に変換されて詰めて表示されてしまい見にくいですね。 ソースコードを書くときはcodeタグとpreタグはセットで使うことが多いです。

特殊文字のエスケープ

ソースコードの中に特殊文字が含まれる場合、preタグとcodeタグで囲むだけではいけません。 特殊文字をエスケープして置き換える必要があります。

ソースコード内でよく使われる特殊文字は「<」「>」「'」「"」「&」です。 これらの特殊文字はそのまま書くのではなく以下のような文字に置き換えます。

具体的には以下のようにエスケープして置き換えます。

<pre><code>    

　　<h1>見出し１</h1>

  </code></pre>

<pre><code>    

　　&lt;h1&gt;見出し１&lt;/h1&gt;

  </code></pre>

h1タグの「＜」と「＞」が置き換わっているのがわかります。 このように、preタグ・codeタグ内で特殊文字を扱うときはエスケープして置き換えることを忘れないようにしましょう。