Core Plugins
Mathematics
Plugin for rendering LaTeX math formulas in Comark using KaTeX.
The Math plugin enables rendering of LaTeX math formulas in your markdown content using KaTeX. It supports both inline and display math expressions.
The plugin is part of the core comark package. Install the katex peer dependency:
npm install katex
pnpm add katex
yarn add katex
bun add katex
Basic Usage
With Vue
App.vue
<script setup lang="ts">
import { Comark } from '@comark/vue'
import math from '@comark/vue/plugins/math'
import { Math } from '@comark/vue/plugins/math'
const markdown = `
The equation $E = mc^2$ is famous.
$$
x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
$$
`
</script>
<template>
<Suspense>
<Comark
:components="{ math: Math }"
:plugins="[math()]"
>{{ markdown }}</Comark>
</Suspense>
</template>
With React
App.tsx
import { Comark } from '@comark/react'
import math from '@comark/react/plugins/math'
import { Math } from '@comark/react/plugins/math'
const markdown = `
The equation $E = mc^2$ is famous.
$$
x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
$$
`
function App() {
return (
<Comark
components={{ math: Math }}
plugins={[math()]}
>{markdown}</Comark>
)
}
With Svelte
App.svelte
<script lang="ts">
import { Comark } from '@comark/svelte'
import math, { Math } from '@comark/svelte/plugins/math'
const markdown = `
The equation $E = mc^2$ is famous.
$$
x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}
$$
`
</script>
<Comark {markdown} components={{ math: Math }} plugins={[math()]} />
With Parse API
parse.ts
import { parse } from 'comark'
import math from 'comark/plugins/math'
const result = await parse('Inline $x^2$ and display $$E = mc^2$$', {
plugins: [math()]
})
Syntax
Inline Math
Use single $ delimiters for inline math 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 display (block) math:
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
The quadratic formula:
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
LaTeX Examples
Basic Operations
Addition: $x + y$
Subtraction: $x - y$
Multiplication: $x \times y$ or $x \cdot y$
Division: $x \div y$ or $\frac{x}{y}$
Fractions
Simple: $\frac{a}{b}$
Nested: $\frac{\frac{a}{b}}{c}$
Exponents and Subscripts
Superscript: $x^2$ or $x^{n+1}$
Subscript: $x_i$ or $x_{i,j}$
Combined: $x_1^2 + x_2^2$
Roots
Square root: $\sqrt{x}$
Nth root: $\sqrt[3]{x}$
Complex: $\sqrt{x^2 + y^2}$
Greek Letters
Lowercase: $\alpha, \beta, \gamma, \delta, \epsilon$
Uppercase: $\Gamma, \Delta, \Theta, \Lambda, \Sigma$
Integrals
Indefinite: $\int f(x) dx$
Definite: $\int_0^\infty e^{-x^2} dx$
Multiple: $\iint f(x,y) dx dy$
Summations and Products
Summation: $\sum_{i=1}^{n} i$
Product: $\prod_{i=1}^{n} i$
Limits
$\lim_{x \to \infty} f(x)$
$\lim_{x \to 0^+} \frac{1}{x}$
Matrices
$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$
$$
\begin{bmatrix}
1 & 2 & 3 \\
4 & 5 & 6
\end{bmatrix}
$$
Systems of Equations
$$
\begin{cases}
x + y = 5 \\
2x - y = 1
\end{cases}
$$
Calculus
Derivative: $\frac{df}{dx}$ or $f'(x)$
Partial: $\frac{\partial f}{\partial x}$
Trigonometry
$\sin(x), \cos(x), \tan(x)$
$\arcsin(x), \arccos(x), \arctan(x)$
Logic and Sets
$x \in A$ (element of)
$A \subset B$ (subset)
$A \cup B$ (union)
$A \cap B$ (intersection)
$\forall x$ (for all)
$\exists x$ (there exists)
Configuration
Component Props
Both Vue and React Math components accept these props:
| Prop | Type | Default | Description |
|---|---|---|---|
content | string | required | The LaTeX math expression |
class | string | '' | CSS classes (determines inline vs display) |
The component automatically renders in display mode when the class contains "block", otherwise inline mode.
Edge Cases
Dollar Signs in Text
The plugin intelligently avoids matching dollar signs that aren't math:
Prices like $100 or $200 won't be parsed as math.
The parser requires:
- At least one character between
$delimiters - Content that doesn't start with a digit
- Proper closing delimiter
Math in Different Contexts
Math works everywhere in markdown:
# Formula $E = mc^2$ in heading
- Item with $x^2$
- Another with $y^2$
> Quote with $\alpha + \beta$
Escaping Backslashes
In JavaScript strings, escape backslashes:
example.js
const latex = '\\frac{a}{b}' // Correct
const wrong = '\frac{a}{b}' // Wrong - \f is escape sequence
In template literals, use double backslashes:
example.js
const latex = `\\frac{a}{b}` // Correct
Performance
The plugin is optimized for performance:
- Parse-time tokenization: Math is identified during markdown parsing
- Lazy rendering: KaTeX only renders when components mount
- No regex scanning at render time: All pattern matching happens once
- Minimal overhead: LaTeX stored as plain text in AST until render
Examples
See the Math example for a complete working implementation.
Resources
Related
- Parse API - Main parsing API
- Vue Rendering - Using with Vue
- React Rendering - Using with React