react-mathdown

react-mathdown

A configurable React Component which supports rendering math in the Markdown

Table of Contents

• Usage
• Configuration

Usage

1. Install

npm i -S react-mathdown
// or
yarn add react-mathdown

2. Add MathJax to your current project

Add a script tag to your index.html like this:

<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML-full">
</script>

3. Let's rock!

import React, { Component } from 'react'
import MathDown from 'react-mathdown'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '**golden ratio**: $\\frac{\\sqrt{5}+1}{2}
Configuration



Property
Description
Type
Default



style
style object of container
object
-


className
class name of container
string
-


jaxConfig
MathJax.Hub.config
object
{ tex2jax: { inlineMath: [['$', '$']] } }


markedConfig
marked options
object
{ gfm: true, tables: true, breaks: false, smartLists: true, smartypants: false }


value
markdown text to be rendered
string



NOTE:

props.jaxConfig and props.markedConfig will be merged with the default value and passed to MathJax.Hub.Config() and marked.setOptions() respectively.
markedConfig.sanitize will always be false, since we do MathJax before marked.


    }
  }

  onChange = (e) => this.setState({value: e.target.value})

  render() {
    return (
      <div>
        <input
          value={this.state.value}
          style={{ width: 300 }}
          onChange={this.onChange}
        />
        <MathDown value={this.state.value} />
      </div>
    )
  }
}

export default App

Configuration

NOTE:

• __INLINE_CODE_1__ and __INLINE_CODE_2__ will be merged with the default value and passed to __INLINE_CODE_3__ and __INLINE_CODE_4__ respectively.
• __INLINE_CODE_5__ will always be __INLINE_CODE_6__, since we do MathJax before marked.