【HTML5】ブログ記事でHTMLのソースコードを背景色付きで掲載する方法

ソースコードを色分けして表示したい！
- ①タグの前後をバッククォート(`)で無効化して表示する方法
- ②<>を特殊記号に置換して表示する方法

ソースコードを色分けして表示したい！

記事を書く際、要素のスコープを分かりやすくするために色分けして載せたいときがある。
いくつか手法を思いついたので次のサンプルを例にまとめてみる。

これがGoogleのリンク先です。

これがYahooのリンク先です。

これがAmazonのリンク先です。

上記のソースコードは次のとおり。

<div style="background-color: #FFF000;">
  <ul>
    <span style="background-color: #00FFFF;"><li></span><span style="background-color: #00FFFF;">これが<span style="background-color: #FF0000;"><a href="https://www.google.co.jp/">Google</a></span>のリンク先です。</li>
    <span style="background-color: #00FFFF;"><li></span><span style="background-color: #00FFFF;">これが<span style="background-color: #FF0000;"><a href="https://www.yahoo.co.jp/">Yahoo</a></span>のリンク先です。</li>
    <span style="background-color: #00FFFF;"><li></span><span style="background-color: #00FFFF;">これが<span style="background-color: #FF0000;"><a href="https://www.amazon.co.jp/">Amazon</a></span>のリンク先です。</li>
    </ul>
</div>

【解説】
１．全体を<div>要素で囲み背景色を黄色(#FFF000)にする。これで<ul>要素は黄色になる。

２．<li>要素を水色にするために<li>要素全体を<span>要素で囲み背景色を水色(#00FFFF)にする。
<li>要素は３つあるため、３つそれぞれに書く。

３．<a>要素を赤色にするために<a>要素全体を<span>要素で囲み背景色を赤色(#FF0000)にする。

そして、上記のソースコード自体に色を付けたものが次のコード。

<ul>

<li>これが<a href=”https://www.google.co.jp/“>Google</a>のリンク先です。</li>

<li>これが<a href=”https://www.yahoo.co.jp/“>Yahoo</a>のリンク先です。</li>

<li>これが<a href=”https://www.amazon.co.jp/“>Amazon</a>のリンク先です。</li>

</ul>

上記を実現するためには2種類の方法がある。

①タグの前後をバッククォート(`)で無効化して表示する方法

このやりかたのソースコードは次のとおり。

<div style="background-color: #FFF000;">
  `<ul>`
    <div style="text-indent: 2em;"><span style="background-color: #00FFFF;">`<li>`</span><span style="background-color: #00FFFF;">これが<span style="background-color: #FF0000;">`<a href="https://www.google.co.jp/">Google</a>`</span>のリンク先です。`</li>`</div>
    <div style="text-indent: 2em;"><span style="background-color: #00FFFF;">`<li>`</span><span style="background-color: #00FFFF;">これが<span style="background-color: #FF0000;">`<a href="https://www.yahoo.co.jp/">Yahoo</a>`</span>のリンク先です。`</li>`</div>
    <div style="text-indent: 2em;"><span style="background-color: #00FFFF;">`<li>`</span><span style="background-color: #00FFFF;">これが<span style="background-color: #FF0000;">`<a href="https://www.amazon.co.jp/">Amazon</a>`</span>のリンク先です。`</li>`</div>
  `</ul>`
</div>

【解説】
１．次のタグの前後をバッククォートで囲む。
<ul>、</ul>、<li>、</li>、<a>の頭のみ、</a>の後ろのみ。
<a>タグは開始タグと終了タグのそれぞれの前後で無いことに注意が必要。

２．<li>要素を<div style="text-indent: 2em;">～</div>で囲む。
これには以下の２つの理由がある。
１）前項１で<li>要素をバッククォートで囲んでしまったため、ただの文字列扱いとなってしまいこのままだと３つの<li>要素が横に連結されるのを防ぐ。
２）コーディングしているときのタブインデックスを再現するためにtext-indentを使う。

②<>を特殊記号に置換して表示する方法

おそらく①の方法はうまくいかない。なぜならタグが文字列として表示できないから。
文字列として表示したい場合、「<」は特殊記号で「/<」「>」は特殊記号で「>」と表す。
なので「<」を「/<」に置換し、「>」を「>」に置換してあげるとうまく表示されるようになる。

<div style="background-color: #FFF000;">
  <ul>
    <div style="text-indent: 2em;"><span style="background-color: #00FFFF;"><li></span><span style="background-color: #00FFFF;">これが<span style="background-color: #FF0000;"><a href="https://www.google.co.jp/">Google</a></span>のリンク先です。</li></div>
    <div style="text-indent: 2em;"><span style="background-color: #00FFFF;"><li></span><span style="background-color: #00FFFF;">これが<span style="background-color: #FF0000;"><a href="https://www.yahoo.co.jp/">Yahoo</a></span>のリンク先です。</li></div>
    <div style="text-indent: 2em;"><span style="background-color: #00FFFF;"><li></span><span style="background-color: #00FFFF;">これが<span style="background-color: #FF0000;"><a href="https://www.amazon.co.jp/">Amazon</a></span>のリンク先です。</li></div>
  </ul>
</div>