mdrd
Render markdown with code highlighting, katex, mermaid.
- Rendering markdown in WebWorkers
- Automatically load libraries used from CDN dynamically
- Code highlighting, katex, mermaid included
- React component supported
Installation
npm install mdrd
Usage
Markdown renderer
import mdrd from 'mdrd'
const mdrdOptions = {
katex: {},
marked: {},
cdn: {
prefix: 'https://cdn.jsdelivr.net/npm/',
libs: {
marked: 'marked@9.1.2/lib/marked.umd.min.js',
prismjs: 'prismjs@1.29.0/components/prism-core.min.js',
katex: 'katex@0.16.9/dist/katex.min.js',
mermaid: 'mermaid@10.5.1/dist/mermaid.min.js',
},
},
}
const renderMarkdown = mdrd(mdrdOptions)
const content = '# hello world'
const html = await renderMarkdown(content)
const htmlWithMermaid = await renderMarkdown.mermaid(content, html)
React component
import { MdView } from 'mdrd'
function ReactComponent() {
const mdrdOptions = {}
return (
<MdView
options={mdrdOptions}
copy
>
# hello world
</MdView>
)
}
Options
-
katex
: Katex options -
marked
: Marked options -
cdn
: CDN options
Default options:
const libsMinVersion = process .env .NODE_ENV === 'development' ? '' : '.min'
const defaultOptions = {
katex: {},
marked: {},
cdn: {
prefix: 'https://cdn.jsdelivr.net/npm/',
libs: {
marked: `marked@9.1.2/lib/marked.umd${libsMinVersion}.js`,
prismjs: `prismjs@1.29.0/components/prism-core${libsMinVersion}.js`,
katex: `katex@0.16.9/dist/katex${libsMinVersion}.js`,
mermaid: `mermaid@10.5.1/dist/mermaid${libsMinVersion}.js`,
},
},
}