HTML でコードブロックを書く

1. HTML で <code> タグとその内容を <pre> タグ内にラップしてコードブロックを記述する
2. HTML で <code> タグと CSS white-space プロパティを使用してコードブロックを記述する

この記事では、コードスニペットのブロックを HTML で記述するいくつかの方法を紹介します。

HTML で <code> タグとその内容を <pre> タグ内にラップしてコードブロックを記述する

<code> タグは、コンピューターコードの一部を定義します。内部のコンテンツは、ブラウザのデフォルトの monospace フォントで表示されます。

タグは、HTML でコードブロックを表すために使用されます。タグはインラインタグです。

つまり、<code> タグ内にコードスニペットを記述すると、タグ内のコンテンツが 1 行で表示されます。改行やスペースは保持されません。

<pre> タグは、事前にフォーマットされたテキストを定義します。 <pre> 要素のテキストはすべて固定幅のフォントで表示され、テキストはスペースと改行の両方を保持します。

<pre> タグ内のテキストまたはコンテンツは、HTML ソースコードで正確に記述されたとおりに表示されます。 <pre> タグはブロックレベルの要素です。

<code> タグとその内容を <pre> タグ内にラップすると、<code> タグ内の内容はブロックレベルの要素として動作します。コンテンツには monospace フォントが含まれ、コードスニペットの改行とスペースも保持されます。

たとえば、JavaScript コードを記述し、そのコードを <code> タグで囲みます。次に、<code> 要素を <pre> タグでラップします。

サンプルコード：

<p>Code snippet for addition of two numbers in javascript</p>
<pre>
  <code>
    function add (a,b) {
    sum = a + b;
    return sum;
    }
  </code>
</pre>

上記の例では、JavaScript コードブロックが表示されます。

HTML で <code> タグと CSS white-space プロパティを使用してコードブロックを記述する

この方法では、いくつかの CSS スタイルを使用して <pre> タグの代わりを探します。以前は、<code> 要素がインライン要素であることを知っていました。

<pre> タグを使用して、ブロックレベルの要素にしました。ただし、display プロパティを block に設定することで、<code> タグをブロックレベルの要素にすることもできます。

また、white-space プロパティを pre-wrap に設定することで、code タグの改行とスペースを保持できます。その結果、HTML ソースコードで記述されたコードスニペットが表示されます。

したがって、HTML でコードブロックを作成できるようになります。

たとえば、<code> タグを作成し、その中に JavaScript コードスニペットを記述します。 <code> タグに sum のクラス名を付けます。

CSS で、sum クラスを選択し、display プロパティを block に設定し、white-space プロパティを pre-wrap に設定します。

コード例：

<code class="sum">
  function (a, b) {
  sum = a + b;
  return sum;
  }
</code>

.sum {
  display: block;
  white-space: pre-wrap;
}

上記のコード例では、JavaScript コードブロックが生成されます。