Highlighted code interpreted as actual javascript when using custom highlighter

Given

```js const { getByRole }= render(<Button />); ```

using a custom highlighter can lead mdsvex to consider this javascript resulting in a ReferenceError (getByRole is not defined).

Highlighter used:

mdsvex({
	extension: '.svx',
	highlight: {
		highlighter(code, lang) {
			if (lang && hljs.getLanguage(lang)) {
				try {
					return (
						'<pre class="hljs"><code>' +
						hljs.highlight(lang, code, true).value +
						'</code></pre>'
					);
				} catch (error) {
					console.error(error);
				}
			}

			return '';
		},
	},
});

which creates the following markup from the code above

<pre class="hljs"><code><span class="hljs-keyword">const</span> { fireEvent, getByRole } = render(<span class="hljs-string">&#x27;&lt;Button /&gt;&#x27;</span>);
</code></pre>

The current behavior is already problematic if disabling syntax highlighting as documented:

function highlighter(code, lang) {
	return `<pre><code>${code}</code></pre>`;
}

– https://mdsvex.com/docs#highlight

[pngwn]

Yes sorry, was just pseudocode, the contesnt of @html needs to be an expression so a slight adjustment to your code:

return (
	'{@html \`<pre class="hljs"><code>' +
	hljs.highlight(lang, code, true).value +
	'</code></pre>\`}'
);

We need to wrap the HTML string that we want to render in backticks in order to satisfy the compiler: {@html expression}

[eps1lon]

const highlight = (code, lang) => {@html \my highlighted code` }`;

I don’t understand this. Did you mean to put the tokenized code after the @html?

return (
	'{@html <pre class="hljs"><code>' +
	hljs.highlight(lang, code, true).value +
	'</code></pre>}'
);

Otherwise I don’t know what the code you posted is supposed to do.