Skip to content
MDX Svelte

Customize Markdown Elements

You can replace HTML elements of Markdown output with Svelte components.

img.svelte (The file name must match the HTML tag name):

<script lang="ts">
    export let src: string
</script>


<img {src} />

svelte.config.js:

mdxPreprocess({
    elements: ["img"],
})

+layout.svelte:

<script module lang="ts">
    import img from "$lib/markdown/img.svelte"


    export const mdxElements = { img }
</script>


<script lang="ts">
    import { setContext } from "svelte"


    setContext("mdxElements", mdxElements)
</script>

Advanced

Find and replace HTML elements with custom components using CSS selectors.

svelte.config.js:

mdxPreprocess({
    elements: [
        {
            tag: "MyBlockCode",
            selector: "pre code",
        },
        {
            tag: "MyInlineCode",
            selector: ":not(pre) code",
        },
    ],
})

Supported CSS selectors.