11ty + Syntax Highlighter Vite Error

[Aaron Stezycki]

Describe the bug

Using the packaged 11ty Syntax highlighter with vite, using the 'diff-html' function results in a vite process error. It's unable to process < or > in inside <pre><code> blocks.

Unable to parse HTML; Illegal tag name. Use '&lt;' to print '<'.
<div class="ds-example__code"><pre class="language-diff-html"><code class="language-diff-html"><span class="token deleted-arrow deleted language-html"><span class="token prefix deleted"><</span>h6>Heading 6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h6</span><span class="token punctuation">></span></span></span></code></pre></div>
                                                                                                                                                                                          ^

Can we get 11ty to further process and escape the html before it gets to vite? or is there a vite plugin to help it understand the html inside code examples better?

Additional context
Used in a .njk like ...

{% highlight 'diff-html' %}
{% include '_heading.html' ignore missing %}
{% endhighlight %

Links: Syntax Plugin

[Aaron Stezycki]

I think, this is more an problem with with the syntax highlighting plugin for eleventy. Gonna close this as I feel like it needs investigating more.