Math

Render mathematical equations using KaTeX and LaTeX syntax.

Properties

PropTypeDefaultDescription
equationstring—The LaTeX equation to render. May also be passed as children.
captionstring—Caption shown below the equation.

The component accepts the equation either as the equation prop or as children. The equation prop takes precedence when both are provided.

Examples

Basic Equation

E=mc2E = mc^2
<scalar-math equation="E = mc^2"></scalar-math>
<Math equation="E = mc^2" />

Equation as Children

∫0∞e−x2dx=π2\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
<scalar-math>
  \int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
</scalar-math>
<Math>{String.raw`\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}`}</Math>

With a Caption

a2+b2=c2a^2 + b^2 = c^2
Pythagorean theorem
<scalar-math
  equation="a^2 + b^2 = c^2"
  caption="Pythagorean theorem">
</scalar-math>
<Math
  equation="a^2 + b^2 = c^2"
  caption="Pythagorean theorem"
/>

MDX Shortcut

<Latex> is an alias for <Math>, available only in MDX.

<Latex equation="\\sum_{n=1}^{\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}" />