catnose
catnose
HTMLの<code>タグは、ソースコードの文字列を表示して見せるときに使います。このページでは<code>の基本的な使い方から、CSSで装飾する方法、シンタックスハイライトを使う方法まで解説します。
codeタグの使い方
<p>まずは<code>console.log('Hello, world!')</code>を実行してみましょう。</p>
👆<code>は文中でコードを紹介するときによく使います。<code>はいわゆるインライン要素[1]にあたり、多くの場合は段落やリストなどの文中で使うことになります。
✍️HTML、CSS、JavaScript、Python、Ruby、Go...などなど、どんな言語であってもコードを表示したいときにはcodeタグを使えばOKです。
codeを使うメリット
ソースコードをきちんと<code>タグで囲むことには以下のようなメリットがあります。
<code>を装飾すればユーザーは「どの部分がコードなのか」がパッと見て分かりやすい- 検索エンジンのクローラーなどのロボットが「どの部分がコードなのか」が分かる
ユーザーにコードを見せたいときには基本的に<code>で囲むようにしましょう。
preを使って複数行のコードを表す
HTML preの中にcodeを入れる
<pre>
<code>
ここにコードを書く
</code>
</pre>
👆複数行のコードを載せるときには<pre>タグの中に<code>タグを入れ、その中にコードを書きます。
✍️preタグとは
整形済みテキストを表すためのタグで、空白や改行などのホワイトスペースをそのまま表示してくれます（preを使わないとコード内の改行が詰められて表示されてしまいます）。
1行〜複数行のソースコードをまとめて見せたいときには<pre>と<code>を合わせて使いましょう。
<p>サンプルコードを紹介します。</p>
<pre><code>var foo = function (bar) {
return bar++;
};
console.log(foo(5));</code></pre>
👆HTMLの<pre><code>〜</code></pre>の中のテキストの改行や半角スペースが、そのままページに反映されているのが分かると思います。
<pre>が1つのブロックを作るため、<p>などのタグ内に入れる必要はありません。
CSSでcodeのスタイルを変更
デフォルトの表示
<p><code>console.log("hello")</code>を実行しましょう。</p>
👆デフォルトでは<code>内のテキストはこのように表示されます。font-family: monospaceが適用されているため、等幅フォント（コードを表示するときによく使うフォント種類）で表示されます。これだけだと少しコード部分の区別がしにくいですね。
CSSで装飾するサンプル
code {
display: inline-block;
padding: 0.1em 0.25em; /* 文字周りの余白 */
color: #444; /* 文字色 */
background-color: #e7edf3; /* 背景色 */
border-radius: 3px; /* 角丸 */
border: solid 1px #d6dde4; /* 枠線 */
}
👆このように<code>の背景色や文字色を調整するのがおすすめです。display: inline-blockがないとpaddingやmarginなどの余白の調整が反映されないので注意しましょう。
コードのフォントを変更
デフォルトのフォントが気に入らない場合はfont-familyを指定しましょう。
code {
font-family: Consolas, Menlo, Monaco, -apple-system, BlinkMacSystemFont, "Segoe UI", Meiryo, monospace;
}
👆参考までに当サイトではこのような指定をしています。
一部のcodeだけスタイルを変える
ここまでのサンプルCSSのようにcode {~}というセレクタを使うと、ページ内のすべての<code>が装飾されます。
p code, li code {
display: inline-block;
padding: 0.1em 0.25em;
color: #444;
background-color: #e7edf3;
border-radius: 3px;
border: solid 1px #d6dde4;
}
👆たとえば、段落タグ（<p>）やリストタグ（<li>）に含まれる<code>だけを装飾したい場合はp code, li code {~}とします。
CSSでpreを使ったコードのスタイルを変える
pre {
margin: 1em 0; /* ブロック前後の余白 */
padding: 1em; /* ブロック内の余白 */
border-radius: 5px; /* 角丸 */
background: #25292f; /* 背景色 */
color: #fff; /* 文字色 */
white-space: pre-wrap; /* はみ出たときに折り返す */
}
👆<pre>によるコードブロックのスタイルを変える例です。white-space: pre-wrapを指定すると、コードが1行に収まりきらないときにはみ出さずに折り返すようになります。
preで横スクロール可能にする
pre {
margin: 1em 0;
padding: 1em;
border-radius: 5px;
background: #25292f;
color: #fff;
overflow-x: auto; /* ⭐ */
-webkit-overflow-scrolling: touch; /* ⭐ */
}
👆はみ出たときに横スクロール可能にするためにはpreに対してoverflow-x: autoを指定します。-webkit-overflow-scrolling: touchはモバイルブラウザで滑らかにスクロールできるようにするためのものです。
コードをシンタックスハイライト
シンタックスハイライトはライブラリを使えば簡単に実現できます。有名なライブラリは次の2つでしょう。
highlight.jsの使用例
ここではhighlight.jsの導入方法を紹介します。必要なファイルはCDN配信されているため、少しコードを貼り付けるだけでシンタックスハイライトを実現できます。
1. CSSファイルの読み込み
HTML headタグ内
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/dracula.min.css">
👆まず<head>タグ内でCSSファイルを読み込みます。highlight.jsではたくさんの種類のスタイル（配色）が用意されています。ここではdracula.min.cssを読み込むことにします。
2. scriptを貼り付け
HTML bodyの閉じタグ前
<!-- JSファイルの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
<script>
// ハイライトを実行
hljs.initHighlightingOnLoad();
</script>
👆次にbodyの閉じタグ（</body>）の直前で、JavaScriptファイルの読み込みと、ハイライトの実行をします。設定は以上で完了です。
✍️メモ
- オプションや細かな設定はhighlight.jsの公式ページを参考にしてください。
- 最新バージョンのファイルのURLはcdn.jsで確認できます。
デモ
たったこれだけでシンタックスハイライトを導入できるのはありがたいですね。
（従来の考え方ですが）HTMLの要素は「ブロックレベル要素」か「インライン要素」のどちらかに分類されていました。このうち「インライン要素」は、段落やリストの中など文章の一部として扱われます。 ↩︎
シンタックスハイライトとは、コードを色付けして見やすくすることです。