✅

I want to be able to easily use custom components in my markdown.

MDX is a build tool that originated in the React community that processes Markdown files so that JSX can be used inline inside of them. This is an indispensable tool for anyone writing about code who wants to show on page examples.

Luckily, Svelte has mdsvex, its own preprocessor that does exactly the same thing.

To set this up, mdsvex needs to be imported into the rollup.config.js file.

import { mdsvex } from 'mdsvex'

It then needs to be added to both the client and server configuration objects. By default it will process .svx file, but it can be configured work with any extension, like the more common .md.

svelte({
    extensions: ['.svelte', '.md'],
    preprocess = [
      mdsvex({ extension: '.md' }
    ]
  })

Lastly, the dev,build, and export commands in package.json need to be modified to be made aware of these extensions with the --ext flag when they run.

"dev": "sapper dev --ext '.svelte .md'",
"build": "sapper build --legacy --ext '.svelte .md'",
"export": "sapper export --legacy --ext '.svelte .md'"

Now, components can be imported inside of a <script> tag, just like any other Svelte page, as used directly inside of markup!

<script>
  import Button from './_button.svelte'
</script>

<Button />

Count: 0

Neat!