Markdoc plugin for Vite
npm install vite-plugin-markdoc
A plugin that enables you to import markdown files on your Vite projects. It uses stripe's Markdoc to parse and transform .md files.
``bash`
pnpm add vite-plugin-markdoc -D
`ts
// vite.config.ts
import { defineConfig } from 'vite'
import markdoc from 'vite-plugin-markdoc'
export default defineConfig({
...
plugins: [markdoc()]
});
`
`md
---
title: What is Markdoc?
---
Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites. Stripe created Markdoc to power our public docs.
{% callout type="check" %}
Markdoc is open-source—check out its source to see how it works.
{% /callout %}
`
`ts
import content from './contents/doc.md'
import Markdoc from '@markdoc/markdoc'
const html = Markdoc.renderers.html(content)
`
The plugin accepts an optional Markdoc.transform config:
`ts
// vite.config.ts
import { defineConfig } from 'vite'
import markdoc from 'vite-plugin-markdoc'
export default defineConfig({
plugins: [markdoc({
nodes: {...},
tags: {...},
...
})]
});
`
`ts`
declare module "*.md" {
import type { RenderableTreeNode } from '@markdoc/markdoc'
const Node: RenderableTreeNode
export default Node
}
Save as vite.d.ts` for instance.
MIT