LaTeX/KaTeX in Slidev

This skill covers rendering mathematical formulas and scientific notation in Slidev using KaTeX, a fast LaTeX math rendering library.

When to Use This Skill

Writing mathematical equations
Scientific presentations
Technical documentation
Academic content
Physics, chemistry, or engineering formulas

Basic Syntax

Inline Math

Surround with single $:

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

Block Math

Surround with double $$:

$$
E = mc^2
$$

Or with line breaks:

$$
\begin{aligned}
f(x) &= x^2 + 2x + 1 \\
     &= (x + 1)^2
\end{aligned}
$$

Common Mathematical Notations

Fractions

Simple: $\frac{a}{b}$

Nested: $\frac{1}{\frac{a}{b} + c}$

Display: $$\frac{x^2 + y^2}{z}$$

Exponents and Subscripts

Exponent: $x^2$, $e^{i\pi}$
Subscript: $x_1$, $a_{ij}$
Combined: $x_1^2$, $a_{ij}^{n+1}$

Square Roots

Simple: $\sqrt{x}$
N-th root: $\sqrt[n]{x}$
Complex: $\sqrt{x^2 + y^2}$

Greek Letters

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

Uppercase: $\Gamma$, $\Delta$, $\Theta$, $\Lambda$, $\Pi$, $\Sigma$, $\Omega$

Operators

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

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

Integral: $\int_{a}^{b} f(x) \, dx$

Double integral: $\iint_D f(x,y) \, dA$

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

Equations and Formulas

Famous Equations

$$
\text{Euler's Identity: } e^{i\pi} + 1 = 0
$$

$$
\text{Pythagorean: } a^2 + b^2 = c^2
$$

$$
\text{Einstein: } E = mc^2
$$

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

Systems of Equations

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

Aligned Equations

$$
\begin{aligned}
(x + y)^2 &= x^2 + 2xy + y^2 \\
(x - y)^2 &= x^2 - 2xy + y^2 \\
(x + y)(x - y) &= x^2 - y^2
\end{aligned}
$$

Matrices

$$
A = \begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
$$

$$
B = \begin{bmatrix}
1 & 2 & 3 \\
4 & 5 & 6 \\
7 & 8 & 9
\end{bmatrix}
$$

$$
\det(A) = \begin{vmatrix}
a & b \\
c & d
\end{vmatrix} = ad - bc
$$

Mathematical Symbols

Comparison

$<$, $>$, $\leq$, $\geq$, $\neq$, $\approx$, $\equiv$, $\sim$

Logic

$\forall$ (for all), $\exists$ (exists), $\neg$ (not)
$\land$ (and), $\lor$ (or), $\Rightarrow$ (implies)

Sets

$\in$ (in), $\notin$ (not in), $\subset$, $\subseteq$
$\cup$ (union), $\cap$ (intersection)
$\emptyset$ (empty set), $\mathbb{R}$ (reals), $\mathbb{N}$ (naturals)

Calculus

$\frac{dy}{dx}$, $\frac{\partial f}{\partial x}$
$\nabla f$, $\nabla \cdot F$, $\nabla \times F$

Arrows

$\rightarrow$, $\leftarrow$, $\leftrightarrow$
$\Rightarrow$, $\Leftarrow$, $\Leftrightarrow$
$\mapsto$, $\to$

Advanced Features

Line Highlighting in Math

$$ {1|3|all}
\begin{aligned}
f(x) &= x^2 \\      // Click 1
f'(x) &= 2x \\      // Click 1
f''(x) &= 2         // Click 2
\end{aligned}
$$

Custom Colors

$$
{\color{red} x^2} + {\color{blue} y^2} = {\color{green} z^2}
$$

Boxed Formulas

$$
\boxed{E = mc^2}
$$

Text in Math

$$
f(x) = \begin{cases}
x & \text{if } x \geq 0 \\
-x & \text{otherwise}
\end{cases}
$$

Chemistry Formulas

Enable mhchem extension in vite.config.ts:

import 'katex/contrib/mhchem'
export default {}

Then use:

$$\ce{H2O}$$

$$\ce{2H2 + O2 -> 2H2O}$$

$$\ce{CO2 + C -> 2CO}$$

$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$

Physics Formulas

Mechanics

$$
F = ma \quad \text{(Newton's Second Law)}
$$

$$
W = \int_a^b \vec{F} \cdot d\vec{s}
$$

$$
KE = \frac{1}{2}mv^2
$$

Electromagnetism

$$
\vec{F} = q(\vec{E} + \vec{v} \times \vec{B})
$$

$$
\nabla \cdot \vec{E} = \frac{\rho}{\epsilon_0}
$$

Quantum Mechanics

$$
\hat{p} = -i\hbar\frac{\partial}{\partial x}
$$

$$
\Delta x \cdot \Delta p \geq \frac{\hbar}{2}
$$

Statistics

$$
\bar{x} = \frac{1}{n}\sum_{i=1}^{n} x_i
$$

$$
\sigma^2 = \frac{1}{n}\sum_{i=1}^{n}(x_i - \bar{x})^2
$$

$$
P(A|B) = \frac{P(B|A) \cdot P(A)}{P(B)}
$$

Machine Learning

$$
J(\theta) = -\frac{1}{m}\sum_{i=1}^{m}[y^{(i)}\log(h_\theta(x^{(i)})) + (1-y^{(i)})\log(1-h_\theta(x^{(i)}))]
$$

$$
\text{softmax}(z_i) = \frac{e^{z_i}}{\sum_{j=1}^{K} e^{z_j}}
$$

$$
\nabla_\theta J(\theta) = \frac{1}{m} X^T (h_\theta(X) - y)
$$

Best Practices

1. Keep Formulas Readable

❌ Too dense

$\frac{\frac{a}{b}+\frac{c}{d}}{\frac{e}{f}-\frac{g}{h}}$

✓ Broken into steps

Let $x = \frac{a}{b} + \frac{c}{d}$ and $y = \frac{e}{f} - \frac{g}{h}$

Then the result is $\frac{x}{y}$

2. Use Display Mode for Complex Formulas

❌ Complex inline

The integral $\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$ is fundamental.

✓ Display mode

The Gaussian integral:
$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$

3. Add Context

**Theorem**: For any triangle with sides $a$, $b$, $c$:

$$a^2 + b^2 = c^2$$

*where $c$ is the hypotenuse.*

4. Use Aligned for Multi-Step

$$
\begin{aligned}
\text{Given: } & x + y = 5 \\
\text{And: } & x - y = 1 \\
\text{Adding: } & 2x = 6 \\
\text{Therefore: } & x = 3, y = 2
\end{aligned}
$$

Common Mistakes

❌ Missing escape for special characters

$50%$ (error!)

✓ Escaped correctly

$50\%$

❌ Missing braces for multi-character

$x^10$ (shows x¹0)

✓ With braces

$x^{10}$

Output Format

When creating math content:

# [Topic Title]

[Brief explanation of the concept]

**Definition/Formula:**
$$
[Main formula in display mode]
$$

**Where:**
- $[variable]$ = [meaning]
- $[variable]$ = [meaning]

**Example:**
[Step-by-step solution]

$$
\begin{aligned}
\text{Step 1: } & [equation] \\
\text{Step 2: } & [equation] \\
\text{Result: } & [final answer]
\end{aligned}
$$

slidev-latex