# umi-plugin-md

> Markdown(*.md) component plugin for umi.

Latest version **0.3.1** (published 2021-09-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install umi-plugin-md
pnpm add umi-plugin-md
yarn add umi-plugin-md
bun add umi-plugin-md
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2021-09-09 |
| First published | 2019-07-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.0.0 |
| Dependencies | 10 |
| Unpacked size | 22.9 KB |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | chiaweilee |

## Links

- npm: https://www.npmjs.com/package/umi-plugin-md
- npm.io page: https://npm.io/package/umi-plugin-md

## Dependencies (10)

- [xss](https://npm.io/package/xss.md) ^1.0.9
- [lodash](https://npm.io/package/lodash.md) ^4.17.14
- [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.10
- [umi-utils](https://npm.io/package/umi-utils.md) ^1.5.1
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.3.4
- [markdown-it](https://npm.io/package/markdown-it.md) ^12.2.0
- [highlight.js](https://npm.io/package/highlight.js.md) ^10.7.3
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^4.0.0
- [@babel/plugin-transform-react-jsx](https://npm.io/package/@babel/plugin-transform-react-jsx.md) ^7.3.0

## Recent versions

- 0.3.1 (latest) — 2021-09-09
- 0.3.0 — 2021-09-09
- 0.2.6 — 2019-07-28
- 0.2.5 — 2019-07-28
- 0.2.4 — 2019-07-18
- 0.2.3 — 2019-07-17
- 0.2.2 — 2019-07-17
- 0.2.1 — 2019-07-17
- 0.2.0 — 2019-07-16
- 0.1.0-beta.1 — 2019-07-11
- 0.0.0-beta.12 — 2019-07-07
- 0.0.0-beta.11 — 2019-07-07
- 0.0.0-beta.10 — 2019-07-06
- 0.0.0-beta.9 — 2019-07-06
- 0.0.0-beta.8 — 2019-07-05
- … 6 more at https://npm.io/package/umi-plugin-md/versions

## README

# [umi-plugin-md](#) · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/chiaweilee/umi-plugin-md/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/umi-plugin-md.svg?style=flat)](https://www.npmjs.com/package/umi-plugin-md) [![npm downloads](https://img.shields.io/npm/dm/umi-plugin-md.svg)](https://npmcharts.com/compare/umi-plugin-md?minimal=true) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](#)

Markdown(\*.md) component plugin for umi. 

*Create your website with umi and markdown only. Convenient and powerful for blog, documentation site and GitBook.*

* **Convert markdown into component:** loaded by `markdown-it` and translate into React component.
* **Auto routes create:** auto create markdown routes from dir.
* **Auto anchor:** auto create anchor for `h1`, `h2` and `h3`.
* **XSS protect:** by [xss](https://www.npmjs.com/package/xss).
* **Support:** umi@2.x only

![Example](https://raw.githubusercontent.com/chiaweilee/umi-plugin-md/master/Screenshot%202019-07-08%20at%2021.15.41.png)

## Installation

```
npm install umi-plugin-md
```

## Demo

https://chiaweilee.github.io/umi-plugin-md/

## Usage

```js
// .umirc.js
export default {
  plugins: ['umi-plugin-md'],
};
```

## Options

option | intro | type |  default  
-|-|-|-
anchor | Auto Anchor `^0.2.0` | string[], falsy to disable | ['h1', 'h2', 'h3'] |
wrapper | HTMLElementTagName | string | section |
className | React className | string | |
style | React style | object | |
html | markdown-it option | boolean | true |
xhtmlOut | markdown-it option | boolean | true |
breaks | markdown-it option | boolean | true |
linkify | markdown-it option | boolean | true |
typographer | markdown-it option | boolean | true |
highlight | markdown-it option | function | highlight.js |
render | wrapper render | (rawHtml: string) => string; | see `src/render.ts` |

**tips**: `route of markdown will have higher priority, so route might be covered.`

e.g, `index.md` will cover `index.jsx`.

## Anchor

![Example](https://raw.githubusercontent.com/chiaweilee/umi-plugin-md/master/Screenshot%202019-07-16%20at%2022.56.20.png)

#### Get anchor id?

```js
import { slug } from 'umi-plugin-md';

var text = $('h2').text();
var id = slug(text);
```

Or copy `umi-plugin-md/lib/helpers/slug.js` to your repo.

#### Anchor Stylize

```css
// global.css
@import "~umi-plugin-md/anchor.css";
```

Or, write yourself.

tips: we do not support `scroll to anchor on 'componentDidMount'` this moment.

## Markdown Stylize

[github-markdown-css](https://www.npmjs.com/package/github-markdown-css)

```css
// global.css
@import "~github-markdown-css/github-markdown.css";
@import "~highlight.js/styles/github.css";
```

```js
// .umirc.js
export default {
  plugins: [['umi-plugin-md', { className: 'markdown-body' }]],
};
```

## Priority

`index.md` have higher priority than `index.jsx`.

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