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

Install

• npm

  npm install --save @yozora/react-inline-math

• yarn

  yarn add @yozora/react-inline-math

Usage

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

• Use it alone:

  import React from 'react'
  import InlineMath from '@yozora/react-inline-math'
  import { MathJaxProvider } from '@yozora/react-mathjax'
  import '@yozora/react-inline-math/lib/esm/index.css'
  
  const wrapper = (
    <MathJaxProvider>
      <InlineMath
        value="x^2 + y^2 = z^2"
        style={{ color: 'orange', fontSize: '16px' }}
      />
    </MathJaxProvider>
  )

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

Props

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-inline-math'.

Related

• @yozora/ast
• @yozora/react-markdown
• @yozora/react-math
• @yozora/react-mathjax
• @yozora/tokenizer-inline-math
• @yozora/tokenizer-math
• mathjax