Skip to main content

Overview

CodeInk supports KaTeX for rendering mathematical notation using LaTeX syntax. KaTeX is fast, self-contained, and produces beautiful, accessible math expressions.

Getting Started

Inline Math

Wrap inline math expressions in single dollar signs:
The equation $E = mc^2$ represents mass-energy equivalence.

The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$.

Display Math

Use double dollar signs for block-level equations:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$
Block math is centered and displayed on its own line, making it ideal for important equations.

Integration

Marked Extension

KaTeX is integrated as a marked.js extension:
import markedKatex from "marked-katex-extension"

marked.use(
  markedKatex({ 
    throwOnError: false 
  })
)

Error Handling

The throwOnError: false option ensures that invalid LaTeX doesn’t break rendering:
markedKatex({ throwOnError: false })
When KaTeX encounters invalid syntax, it displays the error inline without disrupting the rest of the document.

Common Expressions

Greek Letters

$\alpha$, $\beta$, $\gamma$, $\delta$, $\epsilon$, $\theta$, $\lambda$, $\mu$, $\pi$, $\sigma$, $\omega$

$\Alpha$, $\Beta$, $\Gamma$, $\Delta$, $\Theta$, $\Lambda$, $\Sigma$, $\Omega$

Superscripts and Subscripts

$x^2$, $x^{10}$, $x^{y+z}$

$x_1$, $x_{ij}$, $x_{i,j}$

$x_1^2$, $x_{i}^{j}$

Fractions

$\frac{1}{2}$, $\frac{x}{y+z}$, $\frac{\partial f}{\partial x}$

$\dfrac{1}{2}$ (display style)

Roots

$\sqrt{2}$, $\sqrt{x+y}$, $\sqrt[3]{8}$, $\sqrt[n]{x}$

Integrals and Sums

$\int_0^1 f(x) dx$

$\sum_{i=1}^{n} x_i$

$\prod_{i=1}^{n} x_i$

$\lim_{x \to \infty} f(x)$

Matrices

$$
\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}
$$

$$
\begin{pmatrix}
1 & 0 & 0 \\
0 & 1 & 0 \\
0 & 0 & 1
\end{pmatrix}
$$

Advanced Features

Multi-line Equations

Use the aligned environment for aligned equations:
$$
\begin{aligned}
f(x) &= x^2 + 2x + 1 \\
     &= (x+1)^2
\end{aligned}
$$

Cases

Define piecewise functions:
$$
f(x) = \begin{cases}
x^2 & \text{if } x \geq 0 \\
-x^2 & \text{if } x < 0
\end{cases}
$$

Systems of Equations

$$
\begin{cases}
x + y = 5 \\
2x - y = 1
\end{cases}
$$

Operators and Symbols

Binary Operators

$+$, $-$, $\times$, $\div$, $\pm$, $\mp$

Accents and Decorations

$\hat{x}$, $\bar{x}$, $\tilde{x}$, $\vec{x}$, $\dot{x}$, $\ddot{x}$

Brackets

$(x)$, $[x]$, $\{x\}$, $|x|$, $\|x\|$

$\left( \frac{x}{y} \right)$ (auto-sizing)

$\left[ \sum_{i=1}^{n} x_i \right]$

Typography

Text in Math Mode

$\text{This is text in math mode}$

$x \text{ for all } x \in \mathbb{R}$

Font Styles

$\mathbb{R}$, $\mathbb{N}$, $\mathbb{Z}$, $\mathbb{Q}$, $\mathbb{C}$ (blackboard bold)

$\mathbf{x}$ (bold)

$\mathit{x}$ (italic)

$\mathrm{d}x$ (roman)

$\mathcal{L}$ (calligraphic)

Spacing

$a\!b$ (negative space)
$a b$ (default)
$a\ b$ (space)
$a\quad b$ (quad space)
$a\qquad b$ (double quad)

Real-World Examples

Physics

#### Newton's Second Law
$$F = ma$$

#### Schrödinger Equation
$$i\hbar\frac{\partial}{\partial t}\Psi = \hat{H}\Psi$$

#### Maxwell's Equations
$$
\begin{aligned}
\nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \\
\nabla \cdot \mathbf{B} &= 0 \\
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
\nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t}
\end{aligned}
$$

Statistics

#### Normal Distribution
$$
f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}
$$

#### Bayes' Theorem
$$
P(A|B) = \frac{P(B|A)P(A)}{P(B)}
$$

Computer Science

#### Big-O Notation
$O(n)$, $O(n\log n)$, $O(n^2)$, $O(2^n)$

#### Algorithm Complexity
$$
T(n) = \begin{cases}
O(1) & \text{if } n \leq 1 \\
2T(n/2) + O(n) & \text{otherwise}
\end{cases}
$$

Performance

Fast Rendering

KaTeX is significantly faster than MathJax:
  • No web fonts required
  • Synchronous rendering
  • Small bundle size

Client-Side Processing

All math rendering happens in the browser:
export async function renderMarkdown(content: string): Promise<string> {
  // KaTeX processes math during markdown parsing
  const result = await marked.parse(content)
  return result
}

Accessibility

Semantic HTML

KaTeX outputs semantic HTML with proper ARIA labels:
  • Screen reader compatible
  • Keyboard navigable
  • High contrast support

Copy Support

Rendered math includes the original LaTeX in a hidden attribute, allowing users to copy the source.

Limitations

KaTeX does not support the full LaTeX feature set. Some advanced packages and macros are not available.

Not Supported

  • Custom LaTeX packages
  • Complex TikZ diagrams
  • Some AMS-specific commands

Alternatives

For complex diagrams, consider:
  • Mermaid for flowcharts and graphs
  • External tools for publication-quality figures

Source Code Reference

Implementation details can be found in:
  • /src/lib/markdown.ts - KaTeX integration with marked.js

Learn More

For complete KaTeX syntax and supported functions, visit:

Build docs developers (and LLMs) love