markdoc-svelte

Preprocess Markdoc files for use in Svelte Kit sites.

Use

Add the .md extension and the markdoc preprocessor to your Svelte Kit configuration:

import { markdoc } from "markdoc-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: [".svelte", ".md"],
  preprocess: [markdoc()],
};

Frontmatter

Frontmatter added as YAML is automatically parsed. So you could add frontmatter like the following:

---
title: A great page
---

With great content

You can then access it in your layouts:

<script lang="ts">
  export let title = ''
</script>

<h1>{title}</h1>

<slot />

And in your content:

---
title: Using the Next.js plugin
description: Integrate Markdoc into your Next.js app
---

# {% $frontmatter.title %}

Options

You can choose to customize how the Markdoc file is processed.

Extensions

By default, files ending in .md are preprocessed. To use other extensions, add them to the extensions array in the options:

import { markdoc } from "markdoc-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: [".svelte", ".markdoc", ".md"],
  preprocess: [
    markdoc({
      extensions: [".markdoc", ".md"],
    }),
  ],
};

Layout

To give your processed Markdoc a layout, pass the path to the layout file:

import { markdoc } from "markdoc-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: [".svelte", ".md"],
  preprocess: [
    markdoc({
      layout: "/path/to/layout.svelte",
    }),
  ],
};

Frontmatter in YAML format is automatically passed to your layout. The content is passed to a <slot /> tag.

Schema path

By default, the preprocessor looks for your Markdoc schema definition in a /markdoc/ directory at the app root. To use a different path, define the directory in the options:

import { markdoc } from "markdoc-svelte";

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: [".svelte", ".md"],
  preprocess: [
    markdoc({
      schema: "/path/to/schema/directory",
    }),
  ],
};