# 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.

## 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


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
}
})