cocoon+Enlighterで謎のHTMLコードが表示される

症状

コードブロックでコピーができるようにEnlighterを導入したのだが、見えちゃいけないはずのHTMLコードが表示され、うまくレンダリングされなかった。
↓見た目だけ再現

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">custom_category_card_widget</span><span class="hljs-params">()</span> </span>{
    $args = <span class="hljs-keyword">array</span>(
        <span class="hljs-string">'post_type'</span>      => <span class="hljs-string">'post'</span>,
        <span class="hljs-string">'posts_per_page'</span> => <span class="hljs-number">10</span>,
        <span class="hljs-string">'category_name'</span>  => <span class="hljs-string">'seikabutsu'</span>,
    );
    $query = <span class="hljs-keyword">new</span> WP_Query($args);
    <span class="hljs-comment">// ラッパー div を追加</span>
    $html = <span class="hljs-string">'<div class="custom-widget"><div class="custom-post-cards">'</span>;
    <span class="hljs-keyword">if</span> ($query->have_posts()) {
        <span class="hljs-keyword">while</span> ($query->have_posts()) {
            $query->the_post();
            $link    = get_permalink();
            $title   = get_the_title();
            $date    = get_the_date(<span class="hljs-string">'Y.n.j'</span>);
            $excerpt = get_the_excerpt();
            $excerpt = str_replace(<span class="hljs-string">'[...]'</span>, <span class="hljs-string">' ...'</span>, $excerpt);
            $thumb   = has_post_thumbnail()

原因

cocoon設定の方の「ソースコードをハイライト表示する」がONになっていると、ソースコードのレンダリングで競合するらしい。

ついでに

フォントをVScodeで見慣れた consoles + MS ゴシック にした。

/* 2025.3.27 Enlighter フォント*/
.enlighter-code {
    font-family: Consolas, "MS Gothic", "Courier New", monospace;
	font-size: 1.3em
}