slidev-latex

What this skill does

# 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 `$`:

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

### Block Math

Surround with double `$$`:

```markdown
$$
E = mc^2
$$
```

Or with line breaks:

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

## Common Mathematical Notations

### Fractions

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

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

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

### Exponents and Subscripts

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

### Square Roots

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

### Greek Letters

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

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

### Operators

```markdown
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

```markdown
$$
\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

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

### Aligned Equations

```markdown
$$
\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

```markdown
$$
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

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

### Logic

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

### Sets

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

### Calculus

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

### Arrows

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

## Advanced Features

### Line Highlighting in Math

````markdown
$$ {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

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

### Boxed Formulas

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

### Text in Math

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

## Chemistry Formulas

Enable mhchem extension in `vite.config.ts`:

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

Then use:

```markdown
$$\ce{H2O}$$

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

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

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

## Physics Formulas

### Mechanics

```markdown
$$
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

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

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

### Quantum Mechanics

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

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

## Statistics

```markdown
$$
\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

```markdown
$$
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**
```markdown
$\frac{\frac{a}{b}+\frac{c}{d}}{\frac{e}{f}-\frac{g}{h}}$
```

✓ **Broken into steps**
```markdown
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**
```markdown
The integral $\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$ is fundamental.
```

✓ **Display mode**
```markdown
The Gaussian integral:
$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$
```

### 3. Add Context

```markdown
**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

```markdown
$$
\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**
```markdown
$50%$ (error!)
```

✓ **Escaped correctly**
```markdown
$50\%$
```

❌ **Missing braces for multi-character**
```markdown
$x^10$ (shows x¹0)
```

✓ **With braces**
```markdown
$x^{10}$
```

## Output Format

When creating math content:

```markdown
# [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}
$$
```