How to add custom Svelte component with mdsvex

I'm trying to add accordions to my Markdown articles.

I tried multiple ways to make it possible but didn't find out how.I installed remark-directive and added it to the remarkPlugins array in the svelte.config.js file.

But every time I try to use it I have an error.For example with the example in the remark-directive README:

:::main{#readme}Lorem:bripsum.::hr{.red}A :i[lovely] language know as :abbr[HTML]{title="HyperText Markup Language"}.:::

I have this error at the #readme part:

Expected 'if', 'each', 'await', 'key' or 'snippet'https://svelte.dev/e/expected_block_type

With this example:

:::MyComponent{a="123"}Here are the children!:::

I have this error at the " character:

Unexpected character '“'

How to add custom Svelte component?