react-mathdown
v0.1.3
Published
> A configurable React Component which supports rendering math in the Markdown
Downloads
1
Readme
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:
<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}$'
}
}
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
| 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.