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
Arithmetic
Relations
Logic
Set Theory
$+$, $-$, $\times$, $\div$, $\pm$, $\mp$
$=$, $\neq$, $<$, $>$, $\leq$, $\geq$, $\approx$, $\equiv$
$\land$, $\lor$, $\neg$, $\implies$, $\iff$, $\forall$, $\exists$
$\in$, $\notin$, $\subset$, $\supset$, $\subseteq$, $\cup$, $\cap$, $\emptyset$
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}
$$
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: