Mathematics

This extension allows you to write and visualize even complex mathematical formulas or equations in your editor. Please note that the current version is still in a very basic stage.

Installation

Pro Extension

All Tiptap Pro extensions require access to our private registry, set this up first.

Once done, you can install the extension from our private registry. Note: Additionally we need to install the KaTeX library, which is used for most of the magic.

npm install @tiptap-pro/extension-mathematics katex

Additional Setup

You are free to style the rendering element and the editor input.

Import of KaTeX styling (needed).

import 'katex/dist/katex.min.css'

The following classes allow you to select and style the math-decorations. For an example, see demonstration code at the end of this page.

/* Decoration containing the actual text */
.Tiptap-mathematics-editor {
  // …
}

/* Container of the KaTeX rendering */
.Tiptap-mathematics-render {
  // …
}

Settings

regex

Tiptap needs to know when the text is mathematical. Therefor a regular expression pattern allows us to define this shorthand. E.g. using the TeX shorthand $ … $ (see default below). Matches become decorated – they are not stored as own nodes or marks!

Default: /\$([^\$]*)\$/gi

katexOptions

For the math typesetting the extension uses the third party library KaTeX. To adjust its behaviour, you can pass KaTeX options to it. Find all of them here.

Default: undefined

import Mathematics from '@tiptap-pro/extension-mathematics'

// [...]

Mathematics.configure({
  katexOptions: {
    maxSize: 300
  }
})

Usage