{"version":1,"generatedAt":"2026-08-21T13:58:01.770Z","pages":[{"id":"chapter-3","title":"Introduction","routePath":"/","sourcePath":"README.md","text":"Svelte Markdoc Preprocess Bring the power of Markdoc right into your Svelte applications. svelte-markdoc-preprocess lets you author content in Markdoc while rendering with Svelte and SvelteKit. Highlights Works with Svelte and SvelteKit Use Svelte components as Markdoc nodes and tags Configure reusable layouts for pages Auto-load partial files from a directory TypeScript-friendly setup Markdoc schema generation for VS Code support Quick links Quickstart Configuration Advanced GitHub"},{"id":"chapter-4","title":"Quickstart","routePath":"/guide/install/","sourcePath":"guide/install.md","text":"Quickstart Get svelte-markdoc-preprocess running in a SvelteKit project in three steps. 1) Install 2) Configure SvelteKit 3) Create your first page"},{"id":"chapter-6","title":"Configuration","routePath":"/guide/configuration/","sourcePath":"guide/configuration.md","text":"Configuration Pass options to markdoc(...) inside your svelte.config.js. Options extensions Type: string[] Default: ['.markdoc', '.mdoc', '.markdown', '.md'] File extensions to process with Markdoc. nodes Type: string | null Default: null Absolute path to a .svelte file that exports node components from <script module>. tags Type: string | null Default: null Absolute path to a .svelte file that exports tag components from <script module>. partials Type: string | null Default: null Absolute path to the partials directory. generateSchema Type: boolean Default: true Generates .svelte-kit/markdoc_schema.js for the official Visual Studio Code extension. layouts Type: Record<string, string> | null Default: null Map of layout names to absolute .svelte file paths. validationThreshold Type: \"debug\" | \"info\" | \"warning\" | \"error\" | \"critical\" | null Default: 'error' Minimum validation level that should fail the build. allowComments Type: boolean Default: false Allow HTML comments (<!-- -->) in Markdoc files. config Type: ConfigType | null Default: null Pass configuration directly to Markdoc (for example variables, functions, validation, tags, nodes, and partials). highlighter Type: ((code: string, language: string) => Promise<string>) | null Default: null Custom syntax highlighter used for fenced code blocks. The returned string is rendered as HTML."},{"id":"chapter-7","title":"Nodes","routePath":"/guide/nodes/","sourcePath":"guide/nodes.md","text":"Nodes You can use Svelte components in your markdown files, you can define Svelte Component for each node. Create a Svelte file and export Svelte components with the same name as the node from the module script. You can find a list of available nodes here. Custom attributes Declare additional node attributes through the Markdoc config option. They will be passed to the corresponding Svelte component alongside the built-in attributes. Node attributes use Markdoc annotation syntax. The Fence component can then receive highlight through $props()."},{"id":"chapter-8","title":"Tags","routePath":"/guide/tags/","sourcePath":"guide/tags.md","text":"Tags You can use Svelte components for tags, the same way you do for nodes. Create a Svelte file and export Svelte components with the same name as the tag from the module script."},{"id":"chapter-9","title":"Layouts","routePath":"/guide/layouts/","sourcePath":"guide/layouts.md","text":"Layouts You can define layouts in the markdoc options. Layout files are basically Svelte components that render the children snippet. It is used for all files by default. Named If you want to use a named layout for a specific file, you can specify it in the frontmatter. Props Layouts will be passed the frontmatter as props from the Markdoc file. The layout property selects the layout and is not passed to the component."},{"id":"chapter-10","title":"Partials","routePath":"/guide/partials/","sourcePath":"guide/partials.md","text":"Partials Set a partials directory in the preprocessor config. All files in that directory are loaded as partials. Here's an example of including the header.md file as a partial. {% partial file=\"header.md\" /%} Passing variables Partials are like any other tags, so you can pass variables as attributes to them such as: and access the variables as you would in a regular Markdoc document:"},{"id":"chapter-12","title":"Indexing","routePath":"/advanced/content-indexing/","sourcePath":"advanced/content-indexing.md","text":"Indexing Each .markdoc file exports frontmatter, so you can build content lists (for example blog indexes) from load functions."},{"id":"chapter-13","title":"VS Code schema","routePath":"/advanced/vscode-schema/","sourcePath":"advanced/vscode-schema.md","text":"Visual Studio Code schema support With generateSchema: true (default), the preprocessor writes .svelte-kit/markdoc_schema.js. You can point the official Markdoc VS Code extension to that file in markdoc.config.json:"},{"id":"chapter-14","title":"Markdoc config","routePath":"/advanced/markdoc-config/","sourcePath":"advanced/markdoc-config.md","text":"Pass custom Markdoc config Use the config option to pass options directly to Markdoc. Refer to the Markdoc config reference for all available options: https://markdoc.dev/docs/config#options"},{"id":"chapter-15","title":"Code highlighting","routePath":"/advanced/highlighting/","sourcePath":"advanced/highlighting.md","text":"Add custom code highlighting Use highlighter to transform fenced code blocks before rendering. The function receives (code, language) and must return an HTML string."}]}