react-mathjax-preview-span

0.1.9 • Public • Published

react-mathjax-preview

Travis npm package

react-mathjax-preview provides one React component to render MathML, TeX or ASCIImath formulas. See demo.

Installation

Install react-mathjax-preview as a dependency:

npm install react-mathjax-preview

Usage

Import the package and fill the math property with some text containing your formals. Wrap TeX in $ or $$ and ASCIImath in `. Paste MathML as is.

import React, {Component} from 'react'
import {render} from 'react-dom'
import MathJax from 'react-mathjax-preview'
 
const asciimath = '`sum_(i=1)^n i^3=((n(n+1))/2)^2`' # Because of the backtick
const math = String.raw`
  <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <menclose notation="circle box">
      <mi> x </mi><mo> + </mo><mi> y </mi>
    </menclose>
  </math>
 
  $$\lim_{x \t\infty} \exp(-x) = 0$$
 
  ${asciimath}`
 
class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      math: tex
    }
  render() {
    return <MathJax math={this.state.math} />
  }
}

See demo for a complete example. You can also play with the demo:

git clone https://github.com/mehdisadeghi/react-mathjax-preview && cd react-mathjax-preview
npm install
npm run start

And browse to localhost:3000.

License

MIT

Package Sidebar

Install

npm i react-mathjax-preview-span

Weekly Downloads

0

Version

0.1.9

License

MIT

Unpacked Size

11.1 kB

Total Files

5

Last publish

Collaborators

  • pierreleduc