Any change to default highlighter breaks SvelteKit

[donmccurdy]

Beginning from the template here:

https://github.com/josh-collinsworth/sveltekit-blog-starter

I'm finding that any change to the default highlighter ...

svelte.config.js

...
	preprocess: [
		preprocess({
			scss: { prependData: `@use 'src/lib/assets/scss/vars';` }
		}),
		mdsvex({
			extensions: ['.md'],
			rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings]
			highlight: {
				highlighter: function (code, lang) {
					return `<pre><code>${code}</code></pre>`;
				}
			}
		})
	],

... will break the page entirely, with errors like these:

• /src/lib/posts/syntax-highlighting-example.md:15:1 Unexpected token
• /src/lib/posts/syntax-highlighting-example.md:15:6 Expected }

Originally I wanted to add highlight.js to my own app (not based on the blog starter above), and ran into these errors. But it's easier to reproduce using the recommended method to disable syntax highlighting, beginning from any SvelteKit+MDsveX template, and appears to be the same problem. Possibly the default syntax highlighter is escaping characters that these alternatives do not? Returning static text like "hello" from the function works fine.

Thanks!

[donmccurdy]

Digging into source code a bit...

MDsveX/packages/mdsvex/src/transformers/index.ts

Lines 545 to 579 in 095d108

	// escape curlies, backtick, \t, \r, \n to avoid breaking output of {@html `here`} in .svelte
	const escape_svelty = (str: string) =>
	str
	.replace(
	/[{}`]/g,
	//@ts-ignore
	(c) => ({ '{': '{', '}': '}', '`': '`' }[c])
	)
	.replace(/\\([trn])/g, '\$1');
	export const code_highlight: Highlighter = (code, lang) => {
	if (!(process as RollupProcess).browser) {
	let _lang = !!lang && langs[lang];
	if (!Prism) Prism = require('prismjs');
	if (_lang && !Prism.languages[_lang.name]) {
	load_language(_lang.name);
	}
	if (!_lang && lang && Prism.languages[lang]) {
	langs[lang] = { name: lang } as MdsvexLanguage;
	_lang = langs[lang];
	}
	const highlighted = escape_svelty(
	_lang
	? Prism.highlight(code, Prism.languages[_lang.name], _lang.name)
	: escape(code)
	);
	return `<pre class="language-${lang}">{@html \`<code class="language-${lang}">${highlighted}</code>\`}</pre>`;
	} else {
	const highlighted = escape_svelty(escape(code));
	return `<pre class="language-${lang}">{@html \`<code class="language-${lang}">${highlighted}</code>\`}</pre>`;
	}
	};

... I was able to work around the issue by doing:

import escape from 'escape-html';

// escape curlies, backtick, \t, \r, \n to avoid breaking output of {@html `here`} in .svelte
const escape_svelty = (str) => str
  .replace(
    /[{}`]/g,
    (c) => ({ '{': '{', '}': '}', '`': '`' }[c])
  )
  .replace(/\\([trn])/g, '\$1');

...

highlight: {
  highlighter: function (code, lang) {
    const html = escape_svelty(escape(code));
    return `<pre>{@html \`<code>${html}</code>\`}</pre>`;
  }
}

... probably with a bit more tweaking I can get this working for highlight.js too, but, am I going about this the wrong way? Or should MDsvex do this escaping automatically when a custom highlighter is provided? Would be happy to make a PR if that's the case.

[donmccurdy]

Further update — I have a workaround for highlight.js, which requires writing the {@html ...} tag, but does not require escaping.

import hljs from 'highlight.js';

...

mdsvex({
	extensions: ['.md'],
	highlight: {
		highlighter: function (code, lang) {
			const language = hljs.getLanguage(lang) ? lang : 'plaintext';
			const html = hljs.highlight(code, { language }).value;
			return `<pre class="language-${lang}">{@html \`<code class="language-${lang}">${html}</code>\`}</pre>`;
		}
	}
})