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: {},
  sanitize: {
    enabled: true,
  },
  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',
      xss: '[email protected]/dist/xss.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/react'

function ReactComponent() {
  const mdrdOptions = {}
  return (
    <MdView
      options={mdrdOptions}
      copy
    >
      # hello world
    </MdView>
  )
}

Options

• katex: Katex options
• marked: Marked options
• sanitize: worker-side sanitize options powered by xss
• cdn: CDN options

Default options:

const libsMinVersion = process .env .NODE_ENV === 'development' ? '' : '.min'
const defaultOptions = {
  katex: {},
  marked: {},
  sanitize: {
    enabled: false,
    xss: {},
  },
  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`,
      xss: `[email protected]/dist/xss${libsMinVersion}.js`,
    },
  },
}

When sanitize.enabled is true, the worker sanitizes markdown HTML with xss before posting it back to the main thread. Mermaid output is unchanged in this first phase and is not sanitized again after it is appended.