はじめに
過去に「prism」を使用して、シンタックスハイライトを導入しました。
〇ワードプレスにおけるCSSとJavaScripの読み込み方法とシンタックスハイライトの導入。【初心者向け。プラグインなし】
しかし、HTMLのみシンタックスハイライトを適応させることができませんでした。
原因はワードプレスを使用していからだと思っていたし、私自身が「ＨＴＭＬ」を表示させる機会は少ないだろうと思って放置していました。
しかし、最近は以下のようにパラパラ漫画の作成過程を記録しており、「HTML」を表示させることが多くなりました。
〇【jQuery】パラパラ漫画にスクロールバーを設置してみた。
原因
ワードプレスの投稿画面の「カスタムHTML」以下のようにコードを入力して、シンタックスハイライトを導入しようとしていました。
<pre><code class="language-markup">
<button id="moveOn">▶</button>
<button id="Return">◀</button>
<button id="autoPlay">再生</button>
</code></pre>実行結果
ブラウザーで表示させる際に、「＜ ＞」などはタグとして認識されてしまうのです。
解決方法
シンタックスハイライトを導入したいコードのみ「＜」などは特殊文字に変換する必要があります。
〇HTML特殊文字変換ツール
<pre><code class="language-markup">
<button id="moveOn">▶</button>
<button id="Return">◀</button>
<button id="autoPlay">再生</button>
</code></pre>実行結果
<button id="moveOn">▶</button>
<button id="Return">◀</button>
<button id="autoPlay">再生</button>
無事にHTMLもシンタックスハイライトを導入することができました。