A Markdoc preprocessor for Svelte. Supports SvelteKit.
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.
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
MIT