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.

	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,
	}
	}

How to use with mdsvex #331

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions