How to use with mdsvex

[julien-blanchon]

Hello,

I'm trying to use expressive-code in my Svelte 5 / Sveltekit project using mdsvex using the rehype plugins, but I don't get anything different. Anyone with a working example in svelte ?

[hippotastic]

Hello, welcome and thank you for your interest in Expressive Code!

Unfortunately, I have no experience with Svelte. If mdsvex really supports rehype plugins and is based on unified as their docs seem to state, it should work with the EC rehype plugin as long as code blocks are represented as <pre><code>...plaintext...</code></pre> in the HAST tree (with an optional language-xyz class name on the code element), which is what the EC rehype plugin is looking for as you can see here:

expressive-code/packages/rehype-expressive-code/src/utils.ts

Lines 7 to 23 in 85a3641

	export function getCodeBlockInfo(pre: Element) {
	if (pre.tagName !== 'pre' || pre.children.length !== 1) return
	const code = pre.children[0]
	if (code.type !== 'element' || code.tagName !== 'code') return
	const text = code.children[0]
	if (text.type !== 'text') return
	const langClass = getClassNames(code).find((c) => c.startsWith('language-')) ?? ''
	const lang = langClass.replace('language-', '')
	const meta = (code.data?.meta ?? code.properties?.metastring ?? '') as string
	return {
	pre,
	code,
	lang,
	text: text.value,
	meta,
	}
	}

If you have a chance to dump or examine the HAST tree of an example document including code blocks, this could make it easier to see why it doesn't seem to work for you in that setup.

[julien-blanchon]

I found this guy with rehype-expressive-code in mdsvex but could not reproduce: https://github.com/upload-fast/client/blob/09a3fd6873e4c1a4ba7b30867ee3040648829d4a/mdsvex.config.js#L3

[delucis]

Hello! We are moving feature requests and support questions to discussions and using issues only for bugs to help better track those going forward. See you in the Discussions tab!