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: 3 months 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-30T10:40:55.962Z (3 months 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