WordPressテーマCocoonでpreタグ内のタグが消える

ショートカット

WordPressテーマCocoonでpreタグ内のタグが表示されない

WordPressテーマCocoonでは、デフォルトでコードハイライトの機能が備わっています。

テキストエディットモードで<pre></pre>タグで囲んだ部分が自動でハイライトされるのですが、この時コード内にタグ<>文字が入っていると表示されません。

タグ文字を含んだコードをハイライト表示したい場合には、タグ文字をエスケープしてから貼り付けます。

下のサイトなんかを使うと便利です。（いつもお世話になっています。ありがとうございます）

エスケープすると、<div></div>が

& lt;div & gt;& lt;/div& gt;

のような感じに変換されるので、これを<pre>タグ内に貼り付けます。

すると下のように正常に表示されるようになります。

<div></div>

Reactのコードではタグが頻繁に出てくるのでエスケープは必須ですね。