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: '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`,
    },
  },
}