This component is for rendering the [Math][@yozora/ast] data produced by
[@yozora/tokenizer-math][].\
This component has been built into [@yozora/react-markdown][], you can use it directly.

Install

* npm

``bash
npm install --save @yozora/react-math
`

* yarn

`bash
yarn add @yozora/react-math
`

Usage

To use this component alone, You need to place it under the component MathJaxProvider
(exported from [@yozora/react-mathjax][]).

* Use it alone:

`tsx
import React from 'react'
import Math from '@yozora/react-math'
import { MathJaxProvider } from '@yozora/react-mathjax'
import '@yozora/react-math/lib/esm/index.css'

const code =
\\begin{align}
f(x) = \\left\\lbrace
\\begin{aligned}
&x^2, &x < 0 \\\\
&\\frac{1}{x^3}, &x > 0
\\end{aligned}
\\right.
\\end{align}

const wrapper = (

value={ code }
style={{ color: 'orange', fontSize: '16px' }}
/>

)
`

* [@yozora/react-markdown][] has has built-in MathJaxProvider, so you don’t
need to wrap it manually.

$3

Name | Type | Required | Default | Description
:----------:|:---------------------:|:---------:|:-------:|:-------------
className | string | false | - | Root css class
style | React.CSSProperties | false | - | Root css style
value | string | true | - | Mathjax codes

* className: The root element of this component will always bind with the
CSS class 'yozora-math'`.

Related

* [@yozora/ast][]
* [@yozora/react-inline-math][]
* [@yozora/react-markdown][]
* [@yozora/tokenizer-inline-math][]
* [@yozora/react-mathjax][]
* [@yozora/tokenizer-math][]
* [mathjax][]

[@yozora/ast]: https://www.npmjs.com/package/@yozora/ast#inlinemath
[@yozora/react-inline-math]: https://www.npmjs.com/package/@yozora/react-inline-math
[@yozora/react-mathjax]: https://www.npmjs.com/package/@yozora/react-inline-mathjax
[@yozora/react-markdown]: https://www.npmjs.com/package/@yozora/react-markdown
[@yozora/tokenizer-inline-math]: https://www.npmjs.com/package/@yozora/tokenizer-inline-math
[@yozora/tokenizer-math]: https://www.npmjs.com/package/@yozora/tokenizer-math
[mathjax]: https://www.mathjax.org/