umi-plugin-md ·

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.
• Support: umi@2.x only

Installation

npm install umi-plugin-md

Demo

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

Usage

// .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

Get anchor id?

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

// 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

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

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

Priority

index.md have higher priority than index.jsx.