Markdoc plugin for Vite/Webpack projects.
npm install @markdoc/markdoc unplugin-markdocVite
// 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()],
})---
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>The plugin accepts an optional Markdoc.transform config:
// vite.config.ts
import MarkdocPlugin from 'unplugin-markdoc/vite'
export default defineConfig({
plugins: [MarkdocPlugin({
nodes: {},
tags: {},
})]
})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.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent