# rollup-plugin-mdm

> Transform .md to highlight html/vue/react.

Latest version **1.0.2** (published 2023-01-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install rollup-plugin-mdm
pnpm add rollup-plugin-mdm
yarn add rollup-plugin-mdm
bun add rollup-plugin-mdm
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-01-07 |
| First published | 2022-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | yujinpan |
| Maintainers | yujinpan |
| Keywords | rollup, vite, markdown, shiki |

## Links

- npm: https://www.npmjs.com/package/rollup-plugin-mdm
- Repository: https://github.com/yujinpan/rollup-plugin-mdm
- Homepage: https://github.com/yujinpan/rollup-plugin-mdm#readme
- Issues: https://github.com/yujinpan/rollup-plugin-mdm/issues
- npm.io page: https://npm.io/package/rollup-plugin-mdm

## Dependencies (3)

- [shiki](https://npm.io/package/shiki.md) ^0.11.1
- [markdown-it](https://npm.io/package/markdown-it.md) ^13.0.1
- [@types/markdown-it](https://npm.io/package/@types/markdown-it.md) ^12.2.3

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2023-01-07
- 1.0.2-beta.0 — 2022-10-20
- 1.0.1 — 2022-10-20
- 1.0.1-beta.0 — 2022-10-20

## README

# rollup-plugin-mdm

Import markdown module for rollup & vite.

## Usage

```shell
npm i -D rollup-plugin-mdm
```

rollup.config.js

```js
const mdm = require('rollup-plugin-mdm');

module.exports = {
  plugins: [
    mdm()
  ]
}
```

use github css:

```shell
npm i github-markdown-css
```

### import as html

- input

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

- output

```js
import 'github-markdown-css/github-markdown-light.css';

var test = `<div class="markdown-body">
<h2>Title</h2>
<p>description…</p>
</div>`;

export { test as html };
```

### import as react

- input

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

- output

```js
import 'github-markdown-css/github-markdown-light.css';
import { createElement } from 'react';

function test$1() {
  return createElement(
    'div', 
    { 
      className: 'markdown-body',
      dangerouslySetInnerHTML: {
        __html: `<h2>Title</h2>
<p>description…</p>`
      }
    }
  );
}

export { test$1 as react };
```

### import as vue

- input

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

- output

```js
import 'github-markdown-css/github-markdown-light.css';

var test = {
  render(h) {
    h('div', {
      class: 'markdown-body',
      domProps: {
        innerHTML: `<h2>Title</h2>
<p>description…</p>`
      }
    });
  }
};

export { test as vue };
```

## Options

Inherit from [markdown-it#Options](https://markdown-it.github.io/markdown-it/#MarkdownIt.new).

- codeTheme

Inherit from [shiki/themes](https://github.com/shikijs/shiki/blob/main/docs/themes.md#all-themes)

```ts
export type Theme =
  | 'css-variables'
  | 'dark-plus'
  | 'dracula-soft'
  | 'dracula'
  | 'github-dark-dimmed'
  | 'github-dark'
  | 'github-light'
  | 'hc_light'
  | 'light-plus'
  | 'material-darker'
  | 'material-default'
  | 'material-lighter'
  | 'material-ocean'
  | 'material-palenight'
  | 'min-dark'
  | 'min-light'
  | 'monokai'
  | 'nord'
  | 'one-dark-pro'
  | 'poimandres'
  | 'rose-pine-dawn'
  | 'rose-pine-moon'
  | 'rose-pine'
  | 'slack-dark'
  | 'slack-ochin'
  | 'solarized-dark'
  | 'solarized-light'
  | 'vitesse-dark'
  | '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`.

```json
{
  "include": [
    "node_modules/rollup-plugin-mdm/shims-html.d.ts",
    "node_modules/rollup-plugin-mdm/shims-react.d.ts",
    "node_modules/rollup-plugin-mdm/shims-vue.d.ts"
  ]
}
```

---
_Source: https://npm.io/package/rollup-plugin-mdm · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._