✅

I want to be able to automatically replace native HTML elements with JavaScript components after after my Markdown is processed.

Once mdsvex works on the site, the next bit of progressive enhancement is to have Sapper replace vanilla markdown elements with more complex Svelte components.

![just a test](image.jpg)

normally would compile to

<img src="image.jpg" alt="just a test" />

The order in which the mdsvex pipeline works means that only markdown will be transformed, not html in markdown, so that means a plugin is needed to add any attributes outside of standard markdown syntax. Luckily, mdsvex now fully supports remark and rehype plugins, so adding remark-attr is as easy as adding it to the configuration in rollup.config.js.

![just a test](image.jpg){align='right'}

can now become

<figure class="align-right">
    <img src="image.jpg" alt="just a test" />
    <figcaption>just a test</figcaption>
</figure>

Here it is, working!

To get this to work automatically on all markdown files parsed by a certain mdsvex layout, an object of custom components can be important and exported in a module script in that layout file.

<script context="module">
  import { h1, p li } from './components.js';
  export { h1, p, li };
</script>