Mathematics

The comark/plugins/math plugin renders LaTeX math formulas using KaTeX. It supports both inline and display math expressions.

Usage

import { parse } from 'comark'
import math from 'comark/plugins/math'

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

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

<script setup lang="ts">
import { Comark } from '@comark/vue'
import math, { Math } from '@comark/vue/plugins/math'
</script>

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

import { Comark } from '@comark/react'
import math, { Math } from '@comark/react/plugins/math'

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

<script lang="ts">
  import { Comark } from '@comark/svelte'
  import math, { Math } from '@comark/svelte/plugins/math'
</script>

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

Features

Inline Math

Use single $ delimiters for inline expressions:

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:

$$
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:

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

Backslash Escaping

In JavaScript strings, escape backslashes before LaTeX commands:

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

API

math()

Returns a ComarkPlugin that tokenizes $...$ and $$...$$ expressions. Takes no options.

Returns: ComarkPlugin

The plugin stores LaTeX source as plain text in the AST. Rendering requires passing Math to the components prop of <Comark> — see Usage. KaTeX only runs when the component mounts.

Component Props

Props accepted by the <Math> component: