Package Exports

mdrd
mdrd/dist/mdrd.js
mdrd/dist/mdrd.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mdrd) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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