htmlコードをフロントに表示したい

技術メモ的なブログなどをされている方は、
HTMLコードをフロントに表示したい場合があると思います。

1. 方法1：HTMLエンティティに変換する（シンプル）
2. 方法2：シンタックスハイライトライブラリを使う
3. WordPress の場合

方法1：HTMLエンティティに変換する（シンプル）

< を <、> を > に置換して <pre><code> タグで囲む。

<pre><code>
&lt;div class="example"&gt;
  &lt;p&gt;テキスト&lt;/p&gt;
&lt;/div&gt;
</code></pre>

一括変換ツール（ブラウザで使える）：
FreeFormatter – HTML Escape
変換したいコードを貼り付けて「Escape HTML」ボタンを押すだけ。

方法2：シンタックスハイライトライブラリを使う

コードブロックをきれいに色分け表示したい場合は Prism.js または highlight.js を導入する。

<!-- Prism.js の例 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

<pre><code class="language-html">
  &lt;!-- ここにエスケープ済みのコードを貼る --&gt;
</code></pre>