Options

The options are passed to the mdxPreprocess function.

extensions

• Optional
• Type: string[]
• Default: [".md"]

Include the extension of files to be preprocessed and transformed. Don't include the .svelte extension.

Add custom extensions

import { DOT_SVELTE, mdxPreprocess } from "mdx-svelte"
 
const DOT_SVELTE_DOT_MD = ".svelte.md"
 
const config = {
    extensions: [DOT_SVELTE, DOT_SVELTE_DOT_MD],
    preprocess: [
        mdxPreprocess({
            extensions: [DOT_SVELTE_DOT_MD],
        }),
        vitePreprocess(),
    ],
}Copy

elements

• Optional
• Type: string[] | { [x: string]: string[] }

This option is useful for replacing markdown elements with custom components.

By using an array, all components inside it with be applied to all markdown files.

svelte.config.js:

{
    elements: ["img", "blockquote"],
}Copy

+layout.svelte:

<script module lang="ts">
    import blockquote from "./blockquote.svelte"
    import img from "./img.svelte"
 
    export const mdxElements = { blockquote, img }
</script>
 
<script lang="ts">
    import { setContext } from "svelte"
 
    let { children } = $props()
 
    setContext("mdxElements", mdxElements)
</script>
 
{@render children()}Copy

A getContext will be preprocessed to all of the markdown files to receive the value of mdxElements.

Custom layouts

You can use different components for different collections like posts, documentation, etc. As an example, let's create a layout named posts:

{
    elements: {
        posts: ["img", "blockquote"],
    },
}Copy

Add the following property into the frontmatter of a markdown file of a posts collection:

---
layout: posts
---Copy

preprocessDependencies

• Optional
• Type: string[]
• Default: []

Preprocess of the files located in the node_modules folder are disabled by default. Include the name of the packages to be preprocessed.

onFileIgnore

onTransform

Example usage.