ソースコードを<pre><code> </code></pre>で囲う理由

2018年2月10日

ソースコードを表示する場合、
<pre><code>コード</code></pre>
というように<pre>タグ、<code>タグの2つを使って囲みます。

<pre>タグは整形済みテキストの表示に用いるものです。
<code>タグはプログラムコードを示す際に用いるものです。

なんとなく<code>タグだけでよさそうな気がしてしまいますが…

<pre><code> </code></pre>で囲った場合

function shortcode_RedHelloPrint(){
	$msg = '<p style="color:red;">' . こんにちは . '</p>';
	return $msg;
}

これが期待通りの結果ですね。

<pre> </pre>だけで囲った場合

function shortcode_RedHelloPrint(){
	$msg = '<p style="color:red;">' . こんにちは . '</p>';
	return $msg;
}

こちらも概ね期待通りの結果ですが…若干文字の間隔が違いますね。

<code> </code>だけで囲った場合

function shortcode_RedHelloPrint(){ $msg = '<p style="color:red;">' . こんにちは . '</p>'; return $msg; }

こちらは完全にアウトです。
インデントが消えてしまいました。

それぞれの役割

<pre>タグで囲まれたテキストは、整形済みとしてそのまま出力してくれます。
半角スペースや改行をそのまま維持してくれるわけです。

<code>タグはブラウザに、「これがプログラムコードである」と知らせる役割がありますが、このタグで囲うことによって等幅フォントで表示してくれます。

<pre>タグでインデントの削除を抑制し、<code>タグによって等幅フォントで表示。
だから2つをセットで使ってソースコードを表示するわけですね。