How to Write Beautiful Math Equations on Dev.to

Dev.to supports mathematical equations through KaTeX. If you're writing articles about algorithms, machine learning, cryptography, or any math-heavy topic, this is essential knowledge.

This guide covers everything from basic syntax to practical tips for making your equations look great.

Basic Syntax

Dev.to uses liquid tags for math rendering, not the $...$ syntax you might know from LaTeX or GitHub.

Block Equations

For standalone equations on their own line:

{% katex %}
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
{% endkatex %}

$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$

Inline Equations

For equations within text, add inline:

The function {% katex inline %} f(x) = x^2 + 1 {% endkatex %} is defined for all real numbers.

The function $f(x) = x^2 + 1$ is defined for all real numbers.

Common Patterns

Fractions

{% katex %}
\frac{a}{b}, \quad \dfrac{a}{b}, \quad \cfrac{1}{1+\cfrac{1}{2}}
{% endkatex %}

$$\frac{a}{b}, \quad \dfrac{a}{b}, \quad \cfrac{1}{1+\cfrac{1}{2}}$$

Sums and Products

{% katex %}
\sum_{k=1}^{n} k = \frac{n(n+1)}{2}, \quad \prod_{i=1}^{n} a_i
{% endkatex %}

$$\sum_{k=1}^{n} k = \frac{n(n+1)}{2}, \quad \prod_{i=1}^{n} a_i$$

Integrals

{% katex %}
\int_a^b f(x)\,dx, \quad \iint_D f(x,y)\,dx\,dy, \quad \oint_C \mathbf{F} \cdot d\mathbf{r}
{% endkatex %}

$$\int_a^b f(x)\,dx, \quad \iint_D f(x,y)\,dx\,dy, \quad \oint_C \mathbf{F} \cdot d\mathbf{r}$$

Limits

{% katex %}
\lim_{n \to \infty} \left(1 + \frac{1}{n}\right)^n = e
{% endkatex %}

$$\lim_{n \to \infty} \left(1 + \frac{1}{n}\right)^n = e$$

Matrices

{% katex %}
A = \begin{pmatrix} a_{11} & a_{12} \\ a_{21} & a_{22} \end{pmatrix}
{% endkatex %}

$$A = \begin{pmatrix} a_{11} & a_{12} \ a_{21} & a_{22} \end{pmatrix}$$

Bracket variants: pmatrix (round), bmatrix (square), vmatrix (determinant), Bmatrix (curly).

Cases (Piecewise Functions)

{% katex %}
|x| = \begin{cases} x & (x \geq 0) \\ -x & (x < 0) \end{cases}
{% endkatex %}

$$|x| = \begin{cases} x & (x \geq 0) \ -x & (x < 0) \end{cases}$$

Multi-line Aligned Equations

Use the aligned environment to align equations at a specific point (usually =):

{% katex %}
\begin{aligned}
(a+b)^2 &= (a+b)(a+b) \\
&= a^2 + 2ab + b^2
\end{aligned}
{% endkatex %}

$$\begin{aligned} (a+b)^2 &= (a+b)(a+b) \ &= a^2 + 2ab + b^2 \end{aligned}$$

Important: Use aligned, not align. The align environment doesn't work in KaTeX on Dev.to.

Symbols Reference

Greek Letters

Code	Symbol	Code	Symbol
\alpha	α	\beta	β
\gamma	γ	\delta	δ
\epsilon	ε	\theta	θ
\lambda	λ	\mu	μ
\pi	π	\sigma	σ
\phi	φ	\omega	ω

Operators and Relations

Code	Symbol	Meaning
\leq	≤	less than or equal
\geq	≥	greater than or equal
\neq	≠	not equal
\approx	≈	approximately
\equiv	≡	congruent / equivalent
\in	∈	element of
\subset	⊂	subset
\forall	∀	for all
\exists	∃	there exists
\to	→	maps to
\Rightarrow	⇒	implies
\iff	⟺	if and only if

Fonts

Code	Use
\mathbb{R}	Number fields (ℝ, ℤ, ℚ)
\mathbf{v}	Vectors, matrices
\mathcal{F}	Filters, sigma-algebras
\mathfrak{g}	Lie algebras
\text{word}	Text inside equations

Tips for Readability

1. Spacing

Small spacing adjustments make a big difference:

Command	Width	Use
\,	thin	before dx in integrals
\quad	wide	separating expressions
\qquad	extra wide	large separations

Before: $\int_0^1 f(x)dx$
After: $\int_0^1 f(x)\,dx$

2. Auto-sizing Brackets

Use \left and \right to auto-size brackets around tall content:

{% katex %}
\left(\frac{a}{b}\right)^2
{% endkatex %}

3. Color

Highlight important parts with \color{}:

{% katex %}
f(x) = \color{red}{a}x^2 + \color{blue}{b}x + \color{green}{c}
{% endkatex %}

$$f(x) = \color{red}{a}x^2 + \color{blue}{b}x + \color{green}{c}$$

4. Boxed Results

Draw attention to key results:

{% katex %}
\boxed{E = mc^2}
{% endkatex %}

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

What Doesn't Work

Dev.to's KaTeX has the same limitations as other KaTeX-based platforms:

• ❌ \newcommand — no custom macros
• ❌ \begin{align} — use aligned inside katex tags instead
• ❌ \label / \ref — no auto-numbering or cross-references
• ❌ \begin{theorem} — no theorem environments
• ❌ tikz-cd / tikzpicture — no diagram drawing
• ❌ $...$ syntax — must use liquid tags

For manual equation numbering, use \tag{}:

{% katex %}
E = mc^2 \tag{1}
{% endkatex %}

Summary

• Use {% katex %}...{% endkatex %} for block math
• Use {% katex inline %}...{% endkatex %} for inline math
• Use aligned (not align) for multi-line equations
• \, and \quad for spacing, \left/\right for bracket sizing
• No macros, no auto-numbering, no diagrams — those are KaTeX limitations