2.1 タグ <pre>
<code> と <pre> タグは、HTMLでコードの断片やあらかじめフォーマットされたテキストを表示するために使われるんだよね。 こういうのは、コードの例とか他の技術的な資料を見やすくして、元のフォーマットを保つのにかなり役立つよ。
<pre> タグは "preformatted text" の略で、HTMLにおけるテキストを、書かれたそのままに表示するんだ。 スペースや改行、タブを含むすべてをそのまま保持してくれるから、大きなコードの断片や他のフォーマット済みテキストを見せたい時に特に役に立つよ。
シンタックス（構文）:
<pre>
テキスト
</pre>
例:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
この例では、<pre> タグ内のテキストが、元のソースコードに書かれている通りにスペースや改行をそのまま表示されるようになるんだ。
<pre> タグの特徴:
<pre>タグはテキスト中のすべてのスペースと改行を保つよ- テキストを固定幅フォントで表示するよ
- 普通は
<code>タグと一緒に使われて、コードを目立たせるんだ
2.2 タグ <code>
<code> タグは、テキスト内でコードの断片や他のマシン読み取り可能なデータを示すために使われるんだ。 よくコードの行、変数、関数、その他のプログラミングの要素を目立たせたいときに使われるよ。
<code>コード</code>
例:
<p>メッセージをコンソールに出力するには、<code>console.log()</code> 関数を使ってね。</p>
この例では、"console.log()" というテキストがコードとして目立たせて表示されるんだ。
<code> タグの特徴:
<code>タグはテキストを固定幅フォント（普通はCourierやConsolas）で表示するよ- 改行やインデントといったフォーマットは保持しないんだ
<code>タグは<p>、<li>、<pre>などの他のタグ内でよく使われるよ
2.3 <pre> と <code> の使い方
コードの大きなブロックを目立たせてフォーマットするには、<pre> と <code> タグを一緒に使うことが多いんだ。 こうすると、フォーマットを保持して、テキストをコードとして強調できるんだ。
例:
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
この結果、ブラウザはフォーマットを保持して、コードを目立たせて表示するんだ。
2.4 シンタックスハイライト
シンタックスハイライトには、Prism.js や Highlight.js のようなサードパーティのライブラリを使うといいよ。 これらはウェブページ上でコードのシンタックスを自動で認識してハイライトしてくれるんだ。
Highlight.js の使い方の例:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<body>
</html>
この結果、コードブロックがJavaScriptのシンタックスに沿って自動でハイライトされるんだ。
HTMLの<code> と <pre> タグは、元のフォーマットを保持したままコードや他のテキストを表示したりフォーマットしたりするための強力なツールだよ。 楽しんで使ってね！
GO TO FULL VERSION