Wrap codeblocks w/ element?

[AaronNBrock]

I'm trying to wrap the code blocks w/ an element so that I can style them in a particular way. My thinking was to use the highlighter configuration to pass in a custom function which wraps the default function. However, I'm having trouble importing the default function. Is there a way to import this?

[babakfp]

Hey
I don't know about the code_highlight function, but here is how I added code highlighting to my blog:

import { mdsvex, escapeSvelte } from "mdsvex"
import { getHighlighter } from "shiki"

mdsvex({
	highlight: {
		highlighter: async (code, lang) => {
			const highlightedCode = await mdsvexHighlight(code, lang)
			return highlightedCode ? escapeSvelte(highlightedCode) : ""
		},
	},
}),

async function mdsvexHighlight(code, lang) {
	const highlighter = await getHighlighter({
		theme: "rose-pine",
		langs: ["html", "css", "js", "svelte", "php", "cmd"],
	})
	return highlighter.codeToHtml(code, { lang })
}

[AaronNBrock]

Would it be possible to export this function? It'd be useful to keep my copied version updated as the project changes.

[babakfp]

I don't know. I guess you can ask the maintainer to export the function in the new release 🤷.

[AaronNBrock]

@pngwn would it be possible to export the code_highlight function?

[pngwn]

I think that's what they are asking. @AaronNBrock could you file an issue asking for this please? I'll try to take care of it soon.

[AaronNBrock]

Issue created: #507