Add components mapping.

[minhnbnt]

Is there an easy way to convert components to other like renderers in svelte-markdown or react-markdown.

I want to add a copy button in pre blocks but writing unified plugins seems too hard for me.

[BearToCode]

Hi, I checked out svelte-markdown and it looks really cool. It would be great to have something like that here, since it is often requested and would make rendering components easier.

Here are some ideas for the implementation, for future me or anyone who might want to start working on this :)

• Apply a final transform to the HTML syntax tree;
• The transform should take every element in the tree and test if it match a certain criteria;
• If it match one, it is passed as property of a corresponding component(💡make it framework agnostic, so that it can be used in other frameworks Lib Version for native html #37);
  • In Svelte: render the component server-side(using Component.render) and client-side, adding children to the component if necessary; on the client, replace the static elements with the actual components(maybe save a ref to an id on the elements, which are query-selected and replaced with the corresponding component);
• Convert the generated HTML back into the a syntax tree and put it back where it originally was.

It would be cool to make it into a dedicated plugin, but weird things might happen if this plugin's transformer is not run last.