Adding custom classes

[artello73]

Hello,

Facing a need to classes to HTML tags
in general

# Hello, world

needs to be transformed to

<h1 class="h1"> Hello, world</h1>

There is a rehype plugin available, which seems do the trick https://github.com/riderjensen/rehype-class-names
but, I have a difficult time to understand how to connect it.
I tried following:

import type { Plugin } from 'svelte-exmarkdown';
import rehypeClassNames from 'rehype-class-names';
const addClass: Plugin = {
	rehypePlugin: [
		rehypeClassNames,
		{
			h1: 'h1',
			h2: 'h2'
		}
	]
};

but it causing bunch of TypeScript errors .... Any ideas?

[ssssota]

Because rehype-class-names has an old unified package (v10).
svelte-exmarkdown uses unified v11.

You can ignore the type error.
If you feel bad, you can post an issue or PR to rehype-class-names to update unified.

[artello73]

Yes, you are right! Added the plugin locally with updated v11 unified, and got working with very minor changes!
Thanks a lot!

[HuakunShen]

Thanks I got the custom class working with this rehype plugin.
Another question, how to add a copy button to the code blocks.

[HuakunShen]

NVM I found this issue #258