Markdown schema without converting to HTML

[WillemSleegers]

Hi, I'm wondering whether it's possible to have Velite parse markdown files but not convert the content to HTML. I would like to use Velite to have it move figures and update the file paths, but I still need to do some post-processing on the markdown content afterwards. Ideally I would also use code highlighting this way, but I imagine that's not possible without converting the output to HTML.

[zce]

Currently, you can easily achieve this by using a custom schema and the remarkCopyLinkedFiles plugin provided by Velite.

https://github.com/zce/velite/blob/main/src/schemas/markdown.ts

velite/src/assets.ts

Lines 169 to 207 in 714fcac

	export const remarkCopyLinkedFiles = (options: CopyLinkedFilesOptions) => async (tree: Mdast, file: VFile) => {
	const links = new Map<string, Node[]>()
	const linkedPropertyNames = ['href', 'src', 'poster']
	visit(tree, ['link', 'image', 'definition'], (node: any) => {
	if (isRelativePath(node.url)) {
	const nodes = links.get(node.url) || []
	nodes.push(node)
	links.set(node.url, nodes)
	}
	})
	visit(tree, 'mdxJsxFlowElement', node => {
	node.attributes.forEach((attr: any) => {
	if (linkedPropertyNames.includes(attr.name) && typeof attr.value === 'string' && isRelativePath(attr.value)) {
	const nodes = links.get(attr.value) || []
	nodes.push(node)
	links.set(attr.value, nodes)
	}
	})
	})
	await Promise.all(
	Array.from(links.entries()).map(async ([url, nodes]) => {
	const publicUrl = await processAsset(url, file.path, options.name, options.base)
	if (publicUrl == null || publicUrl === url) return
	nodes.forEach((node: any) => {
	if (node.url === url) {
	node.url = publicUrl
	return
	}
	node.attributes.forEach((attr: any) => {
	linkedPropertyNames.forEach(name => {
	if (attr.name === name && attr.value === url) {
	attr.value = publicUrl
	}
	})
	})
	})
	})
	)
	}

[WillemSleegers]

Thanks, I’ll check it out! Not sure if I would call this easy though. 😄

[zce]

I'm not sure about your specific scenario. If you need to reprocess the document in a production environment, you can choose to use s.markdown() to convert it to HTML output, and then use https://github.com/rehypejs/rehype for HTML reprocessing in the runtime.

[zce]

For me, I will always choose precompiled markdown because it will reduce my runtime overhead

[WillemSleegers]

Yeah maybe that works for me too (I'm not too familiar with rehype). My scenario is that I have a Next.js blog with markdown files that have code blocks (including code folding), so I want to replace certain tags with React components (e.g., Shadcn components). Currently I'm using markdown-to-jsx to do that, but maybe rehype also works.

[WillemSleegers]

No luck yet getting it to work with rehype. I think the best kind of solution would be to have velite support plugins + a markdown format that returns markdown content (not implicitly convert it to HTML).

I also tried to make a custom schema but it requires quite a bit of setup (i.e., getting the types Velite uses (e.g., custom from zod) and other assets + typing.