svelte-markdoc

A Markdoc preprocessor for Svelte. Supports SvelteKit.

Setup

Create a SvelteKit project:

mkdir my-markdoc-project
cd my-markdoc-project

pnpm init svelte@next 

Install the svelte-markdoc package:

pnpm install -D svelte-markdoc

Create a markdoc.config.js in the root folder to hold your markdoc config:

export default {
  variables: {
    title: 'My awesome site'
  }
}

Then, configure the preprocessor in svelte.config.js:

import preprocessMarkdoc from 'svelte-markdoc'
import markdocConfig from './markdoc.config.js'

const config = {
  extensions: ['.svelte', '.markdoc'],
  preprocess: {
    markup: preprocessMarkdoc(markdocConfig)
  },
  kit: {
    // ...
  }
}

export default config

Now you can create pages with the .markdoc extension in src/routes:

---
title: Hello from Markdoc
---

# {% $markdoc.frontmatter.title %}

This is *super* cool.

FAQ

How is this different than MDX?

MDX is great! It's very flexible, this is a more contrained editing system where docs are treated as data, whereas with mdx, it's more like code. More info here: https://markdoc.io/docs/faq#why-not-mdx

License

MIT