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: {},
  sanitize: {
    enabled: true,
  },
  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',
      xss: 'xss@1.0.15/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: `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`,
      xss: `xss@1.0.15/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.