codeタグ 👉 コードを表す

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がないとpaddingmarginなどの余白の調整が反映されないので注意しましょう。

コードのフォントを変更

デフォルトのフォントが気に入らない場合は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ファイルの読み込みと、ハイライトの実行をします。設定は以上で完了です。

✍️メモ

デモ

たったこれだけでシンタックスハイライトを導入できるのはありがたいですね。


  1. (従来の考え方ですが)HTMLの要素は「ブロックレベル要素」か「インライン要素」のどちらかに分類されていました。このうち「インライン要素」は、段落やリストの中など文章の一部として扱われます。 ↩︎