rollup-plugin-mdm

Import markdown module for rollup & vite.

Usage

1npm i -D rollup-plugin-mdm

rollup.config.js

1const mdm = require('rollup-plugin-mdm');
2
3module.exports = {
4  plugins: [
5    mdm()
6  ]
7}

use github css:

1npm i github-markdown-css

import as html

• input

1export { default as html } from './test.md';

• output

1import 'github-markdown-css/github-markdown-light.css';
2
3var test = `<div class="markdown-body">
4<h2>Title</h2>
5<p>description…</p>
6</div>`;
7
8export { test as html };

import as react

• input

1export { default as react } from './test.md?react';

• output

1import 'github-markdown-css/github-markdown-light.css';
2import { createElement } from 'react';
3
4function test$1() {
5  return createElement(
6    'div', 
7    { 
8      className: 'markdown-body',
9      dangerouslySetInnerHTML: {
10        __html: `<h2>Title</h2>
11<p>description…</p>`
12      }
13    }
14  );
15}
16
17export { test$1 as react };

import as vue

• input

1export { default as vue } from './test.md?vue';

• output

1import 'github-markdown-css/github-markdown-light.css';
2
3var test = {
4  render(h) {
5    h('div', {
6      class: 'markdown-body',
7      domProps: {
8        innerHTML: `<h2>Title</h2>
9<p>description…</p>`
10      }
11    });
12  }
13};
14
15export { test as vue };

Options

Inherit from markdown-it#Options.

• codeTheme

Inherit from shiki/themes

1export type Theme =
2  | 'css-variables'
3  | 'dark-plus'
4  | 'dracula-soft'
5  | 'dracula'
6  | 'github-dark-dimmed'
7  | 'github-dark'
8  | 'github-light'
9  | 'hc_light'
10  | 'light-plus'
11  | 'material-darker'
12  | 'material-default'
13  | 'material-lighter'
14  | 'material-ocean'
15  | 'material-palenight'
16  | 'min-dark'
17  | 'min-light'
18  | 'monokai'
19  | 'nord'
20  | 'one-dark-pro'
21  | 'poimandres'
22  | 'rose-pine-dawn'
23  | 'rose-pine-moon'
24  | 'rose-pine'
25  | 'slack-dark'
26  | 'slack-ochin'
27  | 'solarized-dark'
28  | 'solarized-light'
29  | 'vitesse-dark'
30  | 'vitesse-light'

• className

The container class name, default is markdown-body (github css).

• injectStyle

Inject markdown style, default is 'github-markdown-css/github-markdown-light.css', set false remove it.

Type shims

Includes shims file to your tsconfig.json.

1{
2  "include": [
3    "node_modules/rollup-plugin-mdm/shims-html.d.ts",
4    "node_modules/rollup-plugin-mdm/shims-react.d.ts",
5    "node_modules/rollup-plugin-mdm/shims-vue.d.ts"
6  ]
7}