Markdown Renderer

Inkdrop's markdown rendering system is built on top of remark, a markdown processor powered by plugins part of the unified collective. You can access a global instance of this class like so:

const { markdownRenderer } = require('inkdrop')

Properties

remarkOptions: { [string]: bool }

It is passed to remark parser. Inkdrop parses Markdown with following options by default:

{
  gfm: true,
  yaml: false,
  commonmark: true,
  pedantic: false
}

Available options are here. Note that changing this options would cause unexpected behaviors.

remarkPlugins: Array<RemarkPlugin>

It is an array of custom remark plugins.

• Example plugin: math

remarkReactComponents: { [string]: ReactComponent }

It is used for rendering Markdown with custom HTML components. If you would like to override rendering a HTML elements with custom component, you could do like so:

class Anchor extends React.Component {
  render() {
    // ...
  }
}
markdownRenderer.remarkReactComponents.a = Anchor

• Example plugin: toc

remarkCodeComponents: { [string]: ReactComponent }

It allows you to render code blocks with custom React components. You can define a component for a language like so:

class JSCodeBlock extends React.Component {
  render() {
    // ...
  }
}
markdownRenderer.remarkCodeComponents['javascript'] = JSCodeBlock

• Example plugin: sequence-diagrams

Can you help us improve these docs?

The source of these docs is here on GitHub. If you see a way these docs can be improved, please fork us!