HTML記事内でソースコードを表現する

HTML記事内でースコードを表現する方法を確認しましょう。

HTML内では直にソースコードは書けない

HTMLはそれ自体がブラウザが解釈するためのスクリプト言語であるため、HTML内に直にスクリプトを書くと、内容に競合が起きてソースコードの表示が崩れたり、コードが実際に実行されてしまう可能性があります。 これを防ぐためは、HTML内ではソースコードを表現するにあたり特別な手続きが必要になります。

<pre>と<code>のタグを使用する

シンプルに結論を述べると、ソースコードは <pre>と<code> のタグ内に記載すれば、HTML記事内にソースコードを正しく表示することができます。

例えば下のようにソースを記載します。（ソース内の < > は&lt;, &gt; として実際参照で表現しておくことに留意してください。なぜなら、HTMLは入れ子でタグを表現できる以上、code内のタグも指示として認識されてしまう可能性があるからです。）

<pre><code>&lt;script type="text/javascript"
 async src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"&gt;
&lt;/script&gt;</code></pre>

すると、ブラウザでは下のように表示されます。

<script type="text/javascript"
 async src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<code>のタグの意味

ここでcodeタグは文字列がソースコードであるということを示すインライン要素です。ただし、このタグの役割はあくまで文字列がコードであるという定義であり、体裁はこのタグからは再現されません。

<pre>のタグの意味

preタグは整形済みのテキストを表示する要素のため、このタグで囲まれた範囲のテキストは、強制的に等角フォントが使われ、タブや空白、改行を含めてタグで囲われた体制の通りに表示されます。code タグの前に置きテキストの体裁を再現しています。

WordPressでつかえるプラグイン

WordPressで使えるプラグインに Highlighting Code Block があります。Gutenbergとクラシックエディター共に利用可能で、シンタックスハイライト（カラーで強調）された状態で、行数と共にコードが表示されます。右上の言語名の横のボタンでコピー可能です。

<script type="text/javascript" async
 src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

Gutenbergではコードブロック内にソースコードを記載、クラシックエディターではクイックタグでソースコードを囲むだけで簡単にソースコードが美しく表示されます。