Options

type Options = {
    extensions?: string[]
    markdownElementsStrategy?: "cheap" | "expensive"
    layouts?: {
        [x: string]: string[]
    }
    nodeModules?: {
        ignore?: boolean
        allowedDependencies?: string[]
    }
}

svelteInMarkdownPreprocess(options: Options)

extensions

• Type: string[]
• Default: [".md", ".svelte.md"]

Include the extension of files to be preprocessed. Only include the markdown files (or similar), not the .svelte files or any other.

Example with the default value

import {
    SVELTE_EXTENSIONS,
    svelteInMarkdownPreprocess,
} from "svelte-in-markdown"

const config = {
    extensions: SVELTE_EXTENSIONS,
    preprocess: [svelteInMarkdownPreprocess(), vitePreprocess()],
}

Example with a custom value

import {
    SVELTE_EXTENSION,
    //             ^ DOESN'T END WITH "S"
    svelteInMarkdownPreprocess,
} from "svelte-in-markdown"

const MY_CUSTOM_EXTENSION = ".hello"

const config = {
    extensions: [SVELTE_EXTENSION, MY_CUSTOM_EXTENSION],
    //                          ^ DOESN'T END WITH "S"
    preprocess: [
        svelteInMarkdownPreprocess({
            extensions: [MY_CUSTOM_EXTENSION],
        }),
        vitePreprocess(),
    ],
}

markdownElementsStrategy

• Type: "cheap" | "expensive"
• Default: "cheap"

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

When using "expensive", you don't need configure the layouts option and use the layout frontmatter property in markdown files.

layouts

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

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

This option is only useful when markdownElementsStrategy is set to "cheap" (which is the default value).

Default layout

Example svelte.config.js file:

const config = {
    preprocess: [
        svelteInMarkdownPreprocess({
            layouts: {
                default: ["img", "blockquote"],
            },
        }),
        vitePreprocess(),
    ],
}

Example +layout.svelte file:

<script lang="ts" context="module">
    import img from "./img.svelte"
    import blockquote from "./blockquote.svelte"

    export const markdownElements = { img, blockquote }
</script>

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

    setContext("markdownElements_", markdownElements)
    //                          ^ IMPORTANT
</script>

<slot />

A getContext will be injected to all of the markdown files to receive the value of markdownElements.

Custom layouts

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

{
    layouts: {
        blog: ["img", "blockquote"],
    },
}

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

---
layout: blog
---

nodeModules

Type:

{
    ignore?: boolean // Default: `true`
    allowedDependencies?: string[] // Default: `[]`
}

Set ignore to false to allow the files located in the node_modules folder be preprocessed.

If ignore was true, set exceptions to allow the files of some packages to be preprocess. Useful when you import a Markdown file from an external package. Add the name of the package to the allowedDependencies option.

onFileIgnore

onTransform

Example usage.