svelte-markdoc

svelte-markdoc

A Markdoc preprocessor for svelte. Supports svelte-kit.

Setup

Create a svelte-kit 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:

// keep all your markdoc config here. functions, variables, tags
export default {
  variables: {
    title: 'My awesome site'
  }
}

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
---

# {% $title %}

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