Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wobsoriano/unplugin-markdoc
Markdoc plugin for Vite/Webpack.
https://github.com/wobsoriano/unplugin-markdoc
markdoc markdown plugin react unplugin vite vue webpack
Last synced: 2 days ago
JSON representation
Markdoc plugin for Vite/Webpack.
- Host: GitHub
- URL: https://github.com/wobsoriano/unplugin-markdoc
- Owner: wobsoriano
- License: mit
- Created: 2022-05-12T20:27:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-06T02:58:56.000Z (over 1 year ago)
- Last Synced: 2024-09-21T12:24:20.129Z (6 days ago)
- Topics: markdoc, markdown, plugin, react, unplugin, vite, vue, webpack
- Language: TypeScript
- Homepage:
- Size: 406 KB
- Stars: 16
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-markdoc
[Markdoc](https://markdoc.io/) plugin for Vite/Webpack projects.
## Install
```bash
npm install @markdoc/markdoc unplugin-markdoc
```
Vite
```ts
// vite.config.ts
import MarkdocPlugin from 'unplugin-markdoc/vite'
export default defineConfig({
plugins: [
MarkdocPlugin({ /* options */ }),
],
})
```
Rollup
```ts
// rollup.config.js
import MarkdocPlugin from 'unplugin-markdoc/rollup'
export default {
plugins: [
MarkdocPlugin({ /* options */ }),
],
}
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require('unplugin-markdoc/webpack')({ /* options */ })
]
}
```
Nuxt
```ts
// nuxt.config.js
export default {
buildModules: [
['unplugin-markdoc/nuxt', { /* options */ }],
],
}
```
> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-markdoc/webpack')({ /* options */ }),
],
},
}
```
esbuild
```ts
// esbuild.config.js
import { build } from 'esbuild'
import MarkdocPlugin from 'unplugin-markdoc/esbuild'
build({
plugins: [MarkdocPlugin()],
})
```
## Usage
```md
---
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
```vue
import Markdoc from '@markdoc/markdoc'
import content from './contents/doc.md'
const html = Markdoc.renderers.html(content)
```
or to render a html directly...
```vue
import html from './contents/doc.md?html'
```
## Configuration
The plugin accepts an optional [`Markdoc.transform`](https://markdoc.io/docs/syntax#config) config:
```ts
// vite.config.ts
import MarkdocPlugin from 'unplugin-markdoc/vite'
export default defineConfig({
plugins: [MarkdocPlugin({
nodes: {},
tags: {},
})]
})
```
## TypeScript Shim
```ts
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