unplugin-markdoc

Markdoc plugin for Vite/Webpack projects.

Install

npm install @markdoc/markdoc unplugin-markdoc

Vite

// vite.config.ts
import MarkdocPlugin from 'unplugin-markdoc/vite'

export default defineConfig({
  plugins: [
    MarkdocPlugin({ /* options */ }),
  ],
})

Rollup

// rollup.config.js
import MarkdocPlugin from 'unplugin-markdoc/rollup'

export default {
  plugins: [
    MarkdocPlugin({ /* options */ }),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-markdoc/webpack')({ /* options */ })
  ]
}

Nuxt

// nuxt.config.js
export default {
  buildModules: [
    ['unplugin-markdoc/nuxt', { /* options */ }],
  ],
}

This module works for both Nuxt 2 and Nuxt Vite

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-markdoc/webpack')({ /* options */ }),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import MarkdocPlugin from 'unplugin-markdoc/esbuild'

build({
  plugins: [MarkdocPlugin()],
})

Usage

---
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 %}

Example with Vue

<script setup>
import Markdoc from '@markdoc/markdoc'
import content from './contents/doc.md'

const html = Markdoc.renderers.html(content)
</script>

<template>
  <div v-html="html" />
</template>

or to render a html directly...

<script setup>
import html from './contents/doc.md?html'
</script>

<template>
  <div v-html="html" />
</template>

Configuration

The plugin accepts an optional Markdoc.transform config:

// vite.config.ts
import MarkdocPlugin from 'unplugin-markdoc/vite'

export default defineConfig({
  plugins: [MarkdocPlugin({
    nodes: {},
    tags: {},
  })]
})

TypeScript Shim

declare module '*.md' {
  import type { RenderableTreeNode } from '@markdoc/markdoc'

  const Node: RenderableTreeNode
  export default Node
}

declare module '*.md?html' {
  const html: string
  export default html
}

Save as markdoc.d.ts for instance.

License

MIT