Math formulas

Example showing how to use Comark with LaTeX math formulas in React and Vite.

Select a file to view its contents

Features

This example demonstrates how to use Comark with LaTeX math formulas in React:

Math Plugin: Import and configure the math plugin to parse $...$ and $$...$$ expressions
Math Component: Register the Math component to render formulas using KaTeX
Inline & Display Math: Supports both inline formulas and display equations
Full LaTeX Syntax: All KaTeX-supported LaTeX commands work

Import the math plugin, component, and KaTeX CSS:

import { Comark } from '@comark/react'
import math, { Math } from '@comark/react/plugins/math'
import 'katex/dist/katex.min.css'

Pass the plugin and component to Comark:

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

Use math expressions in your markdown:

Inline: $E = mc^2$

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

Inline Math: Use single $ delimiters

The formula $x^2 + y^2 = z^2$ is inline.

Display Math: Use double $$ delimiters

$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

Fractions: \frac{numerator}{denominator}

$\frac{a}{b}$

Greek Letters: \alpha, \beta, \gamma, etc.

$\alpha + \beta = \gamma$

Subscripts & Superscripts: _ and ^

$x_1^2 + x_2^2$

Mermaid diagrams

Example showing how to use Comark with Mermaid diagrams in React and Vite.