vite-plugin-markdoc

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.

Installation

pnpm add vite-plugin-markdoc -D

Usage

// vite.config.ts
import { defineConfig } from 'vite'
import markdoc from 'vite-plugin-markdoc'

export default defineConfig({
  ...
  plugins: [markdoc()]
});

---
title: What is Markdoc?
---

# {% $markdoc.frontmatter.title %} {% #overview %}

Markdoc is a Markdown-based syntax and toolchain for creating custom documentation sites. Stripe created Markdoc to power [our public docs](http://stripe.com/docs).

{% callout type="check" %}
Markdoc is open-source—check out its [source](http://github.com/markdoc/markdoc) to see how it works.
{% /callout %}

import content from './contents/doc.md'
import Markdoc from '@markdoc/markdoc'

const html = Markdoc.renderers.html(content)

Configuration

The plugin accepts an optional Markdoc.transform config:

// vite.config.ts
import { defineConfig } from 'vite'
import markdoc from 'vite-plugin-markdoc'

export default defineConfig({
  plugins: [markdoc({
    nodes: {...},
    tags: {...},
    ...
  })]
});

TypeScript Shim

declare module "*.md" {
  import type { RenderableTreeNode } from '@markdoc/markdoc'
  const Node: RenderableTreeNode
  export default Node
}

Save as vite.d.ts for instance.

License

MIT