LaTeX Math Formulas in React with Comark and KaTeX

A React and Vite app that renders inline and block LaTeX math in Markdown with the Comark math plugin and KaTeX.

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 { MarkdownClient } from '@comark/react'
import math, { Math } from '@comark/react/plugins/math'
import 'katex/dist/katex.min.css'

Pass the plugin and component to MarkdownClient:

<MarkdownClient
  value={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$

Vue

A Vue and Vite app that renders a Markdown blog, a syntax showcase, and a live editor with Comark and a custom alert component.

Mermaid diagrams (React)

A React and Vite app that turns mermaid code blocks in Markdown into diagrams with the Comark mermaid plugin.