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

Documents and examples.

Installation

npm install mdrd

Usage

Markdown renderer

import mdrd from 'mdrd'

const mdrdOptions = {
  katex: {},
  marked: {},
  cdn: {
    prefix: 'https://cdn.jsdelivr.net/npm/',
    libs: {
      marked: '[email protected]/lib/marked.umd.min.js',
      prismjs: '[email protected]/components/prism-core.min.js',
      katex: '[email protected]/dist/katex.min.js',
      mermaid: '[email protected]/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: `[email protected]/lib/marked.umd${libsMinVersion}.js`,
      prismjs: `[email protected]/components/prism-core${libsMinVersion}.js`,
      katex: `[email protected]/dist/katex${libsMinVersion}.js`,
      mermaid: `[email protected]/dist/mermaid${libsMinVersion}.js`,
    },
  },
}