react-mathdown
A configurable React Component which supports rendering math in the Markdown
Table of Contents
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:
3. Let's rock!
{ superprops; thisstate = value: '**golden ratio**: $\\frac{\\sqrt{5}+1}{2}$' } this { return <div> <input value=thisstatevalue style= width: 300 onChange=thisonChange /> <MathDown value=thisstatevalue /> </div> }
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
andprops.markedConfig
will be merged with the default value and passed toMathJax.Hub.Config()
andmarked.setOptions()
respectively.markedConfig.sanitize
will always befalse
, since we do MathJax before marked.