---
title: "Mathematics"
description: "Plugin for rendering LaTeX math formulas in Comark using KaTeX."
canonical_url: "https://comark.dev/plugins/built-in/math"
---
# Mathematics

> Plugin for rendering LaTeX math formulas in Comark using KaTeX.

The `comark/plugins/math` plugin renders LaTeX math formulas using [KaTeX](https://katex.org/). It supports both inline and display math expressions.

`katex` is a peer dependency, install it alongside Comark:

```bash [terminal]
npm install katex
```

KaTeX requires its stylesheet to render correctly. Import it once in your app entry point:

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

## Usage

```typescript
import { parseMarkdown } from 'comark'
import math from 'comark/plugins/math'

const result = await parseMarkdown('Inline $x^2$ and display $$E = mc^2$$', {
  plugins: [math()]
})
```

With framework components, pass both the plugin and the `Math` renderer component:

<code-group>
```vue [Vue]
<script setup lang="ts">
import { Markdown } from '@comark/vue'
import math, { Math } from '@comark/vue/plugins/math'
</script>

<template>
  <Suspense>
    <Markdown
      :components="{ math: Math }"
      :plugins="[math()]"
    >{{ content }}</Markdown>
  </Suspense>
</template>
```


```tsx [React]
import { Markdown } from '@comark/react'
import math, { Math } from '@comark/react/plugins/math'

<Markdown
  components={{ math: Math }}
  plugins={[math()]}
>
  {content}
</Markdown>
```


```svelte [Svelte]
<script lang="ts">
  import { Markdown } from '@comark/svelte'
  import math, { Math } from '@comark/svelte/plugins/math'
</script>

<Markdown {content} components={{ math: Math }} plugins={[math()]} />
```
</code-group>

---

## Features

### Inline math

Use single `$` delimiters for inline expressions:

```mdc
The formula $E = mc^2$ relates energy and mass.

The Pythagorean theorem: $a^2 + b^2 = c^2$
```

### Display math

Use double `$$` delimiters for block-level expressions:

```mdc
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
```

### Dollar signs in text

The plugin avoids matching dollar signs that are not math. It requires at least one character between `$` delimiters and content that does not start with a digit:

```mdc
Prices like $100 or $200 won't be parsed as math.
```

<tip>
See the [KaTeX supported functions →](https://katex.org/docs/supported.html) for the full LaTeX reference.
</tip>

### Backslash escaping

In JavaScript strings, escape backslashes before LaTeX commands:

```javascript
const latex = '\\frac{a}{b}' // correct
const wrong = '\frac{a}{b}'  // wrong: \f is a JS escape sequence
```

---

## API

### `math(options?)`

Returns a `ComarkPlugin` that tokenizes `$...$` and `$$...$$` expressions.

**Parameters:**

- `options?` - Optional `MathConfig`:
  - `throwOnError?: boolean` - Throw on parse errors instead of returning an error message. Default: `false`
  - `options?: Record<string, unknown>` - Additional [KaTeX render options](https://katex.org/docs/options.html)

**Returns:** `ComarkPlugin`

The plugin stores LaTeX source as plain text in the AST. Rendering requires passing `Math` to the `components` prop of `<Markdown>` (see [Usage](#usage)). KaTeX only runs when the component mounts.

---

## Component props

Props accepted by the `<Math>` component:

| Prop      | Type     | Default  | Description                                                                             |
| --------- | -------- | -------- | --------------------------------------------------------------------------------------- |
| `content` | `string` | required | The LaTeX expression to render                                                          |
| `class`   | `string` | `''`     | CSS classes. Renders inline when the classes include `'inline'`; otherwise display mode |

---

- [Parse API](https://comark.dev/reference/parse)
- [Plugins](https://comark.dev/plugins)


## Sitemap

See the full [sitemap](https://comark.dev/sitemap.md) for all pages.