How to Write Beautiful Math Equations on Dev.to

Source: Dev.to

Introduction

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.

Standalone Equations

For equations on their own line, wrap the LaTeX code in KaTeX liquid tags:

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

Inline Equations

For equations within text, use the inline variant of the KaTeX tag:

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

Fractions

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

Sums and Products

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

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 %}

Limits

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

Matrices

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

Bracket Variants

• pmatrix – round brackets
• bmatrix – square brackets
• vmatrix – determinant bars
• Bmatrix – curly brackets

Piecewise Functions

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

Multi‑line Aligned Equations

Use the aligned environment (not align) to line up equations at a chosen point, typically =:

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

Common Greek Letters

Useful Operators

Styling and Spacing

Before spacing adjustment

\int_0^1 f(x)dx

After spacing adjustment

\int_0^1 f(x)\,dx

Auto‑sizing Brackets

Wrap tall content with \left and \right to automatically size delimiters:

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

Highlighting Parts of an Equation

Use \color{} to emphasize components:

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

Boxed Results

Draw attention to key results with \boxed{}:

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

What Doesn’t Work in Dev.to’s KaTeX

• \newcommand – custom macros are not supported
• \begin{align} – use aligned inside KaTeX tags instead
• \label / \ref – no automatic numbering or cross‑references
• Theorem environments (\begin{theorem}) – unavailable
• TikZ diagrams (tikzcd, tikzpicture) – not rendered
• $...$ syntax – must use liquid tags

Manual Equation Numbering

If you need a number, add \tag{} manually:

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

Quick Reference

• Block math: {% katex %} … {% endkatex %}
• Inline math: {% katex inline %} … {% endkatex %}
• Multi‑line equations: use aligned (not align) inside KaTeX tags
• Spacing: \,, \quad, \qquad
• Bracket sizing: \left … \right

These tips will help you write clear, beautiful mathematical content on Dev.to.