LaTeX

This is a wrapper around KaTeX that allows you to embed LaTeX expressions directly in Mafs. It supports passing a tex raw string and all KaTeX options. A particularly useful option is macros, which allow you to define reusable LaTeX macros.

Experimental

This component does not work properly in Safari due to some quirks with how WebKit handles the SVG foreignObject element.

Props

<LaTeX ... />

Name	Description	Default
`tex`	`string`	—
`at`	`Vector2`	—
`color`	`string \| undefined`	`var(--mafs-fg)`
`katexOptions`	`KatexOptions \| undefined`	—

Usage

Since LaTeX is a wrapper around KaTeX, you must import KaTeX's CSS for it to render properly. The specific import path may differ depending on your app's underlying configuration. In the future, this may change to be an import like mafs/latex.css.

@import "katex/dist/katex.min.css";

Examples

The example below utilize String.raw to avoid having to escape backslashes, but as noted in the KaTeX docs, \x, \u, and \{ still require escaping (hence the x variable in the following code).

import { Mafs, LaTeX, Coordinates, useMovablePoint, Transform } from "mafs"

// \x is still a special case, even when using String.raw,
// so we make a convenient pre-escaped string for it here.
const x = "\\x"

import { round } from "lodash"

const $default = function LatexExample() {
  const l = useMovablePoint([-2, 1], {
    constrain: ([x, y]) => [round(x, 1), round(y, 1)],
  })
  const r = useMovablePoint([2, 1], {
    constrain: ([x, y]) => [round(x, 1), round(y, 1)],
  })

  const lx = l.x.toFixed(1)
  const ly = l.y.toFixed(1)
  const rx = r.x.toFixed(1)
  const ry = r.y.toFixed(1)

  return (
    <Mafs>
      <Coordinates.Cartesian
        xAxis={{ labels: false }}
        yAxis={{ labels: false }}
      />
      <Transform translate={[-0.7, 0]}>
        <LaTeX
          at={l.point}
          tex={String.raw`
            \begin{bmatrix} ${lx} \\ ${ly} \end{bmatrix}
          `}
        />
      </Transform>

      <Transform translate={[0.7, 0]}>
        <LaTeX
          at={r.point}
          tex={String.raw`
            \begin{bmatrix} ${rx} \\ ${ry} \end{bmatrix}
          `}
        />
      </Transform>

      {l.element}
      {r.element}

      <LaTeX
        at={[-2.5, -2]}
        tex={String.raw`
          % \f is defined as #1f(#2) using the macro
          \f\relax{x} = \int_{-\infty}^\infty
            \f\hat${x}i\,e^{2 \pi i ${x}i x}
            \,d${x}i
        `}
        katexOptions={{ macros: { "\\f": "#1f(#2)" } }}
      />
    </Mafs>
  )
}

import { LaTeX, Mafs } from "mafs"

const $default = function LatexDoc() {
  return (
    <Mafs>
      <LaTeX
        at={[0, 0]}
        tex={String.raw`
          f(x)=f(a)+f'(a)(x-a)+\cdots+\frac{f^{(n)}(a)}{n!}(x-a)^n+R_n(x)
          \\
          R_n(x)=\frac{f^{(n+1)}(c)}{(n+1)!}(x-a)^{n+1}
        `}
      />
    </Mafs>
  )
}

🛠️ Experimental

Usage

Examples

Experimental