sveltejs-markdoc

Render Markdoc renderable nodes in Svelte/SvelteKit projects.

Installation

The library uses , which means you must have svelte@3.47 or higher version

``bash
npm i sveltejs-markdoc
`

Usage

`svelte


<-- pass the renderable tree
`

Rendering Svelte components

$3

To render a Svelte component, provide the Svelte component in Markdoc Schema name.

`svelte




`

`svelte




`

This library also provide MarkdocSvelteSchema type that could be used.

`ts
// Callout.markdoc.ts
import Callout from './Callout.svelte'
import type { MarkdocSvelteSchema } from 'sveltejs-markdoc'

export const callout: MarkdocSvelteSchema = { <-- use the type
render: Callout,
attributes: {
type: {
type: String,
default: 'note',
matches: ['caution', 'check', 'note', 'warning']
}
}
}
`

> Notice: This makes the Markdoc Tag's name property not always string type, which should be kept an eye on when other transformation is needed (matching tag name for example).

$3

Provide the components object along with the content. The components object specifies a mapping from your tags and nodes to the corresponding Svelte components. Learn more about tags and nodes at Markdoc's documentation.

`svelte



<-- pass the components
`

`svelte




``