Complete Guide to Markdown LaTeX Math Formulas

Markdown LaTeX Math Formulas

What do you do when you encounter math formulas while writing a tech blog or taking notes? Plain text can't handle and , and screenshots are hard to maintain. Fortunately, Markdown supports writing math formulas via LaTeX syntax — as long as your editor or platform has the right rendering engine.

This article covers markdown latex from start to finish: from the most basic inline and display formulas, to a common symbol reference, to configuration and compatibility differences across platforms. Whether you're writing notes in Jupyter Notebook, READMEs on GitHub, or managing knowledge in Obsidian, you'll find the relevant sections here.

Honestly, the LaTeX math syntax itself isn't that complicated — the tricky part is in the details. Different platforms support different delimiters, and some commands work in one editor but not another. I've run into plenty of issues switching between GitHub and Obsidian, which I'll cover in detail later.

Basic Rules for LaTeX in Markdown

Let's clear up a common misconception first: Markdown itself doesn't parse LaTeX. The $E=mc^2$ you write in a Markdown file is recognized and rendered by engines like MathJax or KaTeX. Different tools and platforms use different engines, so the same syntax may produce different results on different platforms.

This is why formulas that look fine in Typora sometimes turn into plain text when pushed to GitHub.

Two Math Modes

LaTeX math formulas use two formats:

ModeDelimitersPurposeExample
Inline$...$Embedded within textThe mass-energy equation $E=mc^2$ is famous
Display$$...$$Centered on its own lineSee example below

Inline formulas use single dollar signs and render on the same line as text:

The Pythagorean theorem can be written as $a^2 + b^2 = c^2$, where $a$ and $b$ are the legs.

Rendered: The Pythagorean theorem can be written as $a^2 + b^2 = c^2$, where $a$ and $b$ are the legs.

Display formulas use double dollar signs on their own line:

$$
\sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n
$$

Rendered:

$$ \sum_{i=1}^{n} x_i = x_1 + x_2 + \cdots + x_n $$

By the way, some platforms (like pure MathJax environments) also support \( ... \) for inline formulas and \[ ... \] for display formulas. But on mainstream tools like GitHub, Obsidian, and VS Code, stick with $ and $$ — they have the best compatibility.

Basic Syntax: From Simple to Complex

Superscripts and Subscripts

Superscripts and subscripts are the most common operations, using ^ for superscripts and _ for subscripts:

$x^2$       → superscript
$x_i$       → subscript
$x^{10}$    → multi-character superscript needs curly braces
$x_{i,j}$   → multi-character subscript also needs curly braces

A common beginner mistake: x^10 renders as $x^1$ followed by a 0. Only x^{10} correctly displays $x^{10}$. The curly braces tell LaTeX "treat this as a group."

Fractions

Use \frac{numerator}{denominator} for fractions:

$\frac{1}{2}$

$\frac{a+b}{c+d}$

Rendered: $\frac{1}{2}$ and $\frac{a+b}{c+d}$

In inline formulas, fractions get compressed quite small. If you want inline fractions to display at normal size, use \dfrac (display fraction) instead of \frac:

$\dfrac{1}{2}$  is larger than $\frac{1}{2}$

Square Roots

\sqrt{} is the square root, \sqrt[n]{} is the nth root:

$\sqrt{2}$          → √2
$\sqrt[3]{8}$       → ³√8
$\sqrt{a^2+b^2}$    → √(a²+b²)

Summation and Integrals

These appear very frequently in math and statistics:

$\sum_{i=1}^{n} x_i$      → summation
$\prod_{i=1}^{n} x_i$     → product
$\int_{0}^{\infty} f(x)dx$ → definite integral
$\iint$                     → double integral
$\iiint$                    → triple integral
$\oint$                     → contour integral

Greek Letters

Greek letters are fundamental to writing formulas. Here are the most commonly used ones:

LowercaseSyntaxUppercaseSyntax
$\alpha$\alpha$A$A
$\beta$\beta$B$B
$\gamma$\gamma$\Gamma$\Gamma
$\delta$\delta$\Delta$\Delta
$\epsilon$\epsilon$E$E
$\theta$\theta$\Theta$\Theta
$\lambda$\lambda$\Lambda$\Lambda
$\mu$\mu$M$M
$\pi$\pi$\Pi$\Pi
$\sigma$\sigma$\Sigma$\Sigma
$\phi$\phi$\Phi$\Phi
$\omega$\omega$\Omega$\Omega

The full Greek letter list is quite long. In practice, $\alpha, \beta, \gamma, \theta, \lambda, \mu, \sigma, \omega$ are the ones you'll use the most.

Brackets and Delimiters

Regular parentheses () and square brackets [] don't auto-scale in formulas. To make brackets grow with their content, use \left and \right:

# Regular brackets — fixed size
$(\frac{a}{b})$

# Auto-scaling brackets — grow with content
$\left(\frac{a}{b}\right)$

Besides parentheses, there are square brackets \left[...\right], curly braces \left\{...\right\} (note that curly braces need escaping), and absolute value bars \left|...\right|.

Matrices

Matrices use the \begin{matrix}...\end{matrix} environment. Rows are separated by \\ and columns by &:

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

Rendered (pmatrix is a matrix with parentheses):

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

Different types of matrices use different environments:

EnvironmentStyleSyntax
matrixNo border\begin{matrix}...\end{matrix}
pmatrixParentheses\begin{pmatrix}...\end{pmatrix}
bmatrixSquare brackets\begin{bmatrix}...\end{bmatrix}
BmatrixCurly braces\begin{Bmatrix}...\end{Bmatrix}
vmatrixVertical lines (determinant)\begin{vmatrix}...\end{vmatrix}

Ellipses use \cdots (horizontal) and \vdots (vertical):

$$
\begin{bmatrix}
a_{11} & a_{12} & \cdots & a_{1n} \\
a_{21} & a_{22} & \cdots & a_{2n} \\
\vdots & \vdots & \ddots & \vdots \\
a_{m1} & a_{m2} & \cdots & a_{mn}
\end{bmatrix}
$$

Multi-line Formula Alignment

When formulas are long and need line breaks with alignment, use the align environment with & marking alignment points:

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

Worth noting: align may not be supported on some platforms. GitHub currently doesn't support the align environment and requires workarounds. On GitHub, you can勉强 use & and line breaks, but the results aren't ideal. If you need multi-line aligned formulas on GitHub, my recommendation is to split the derivation into separate individual formulas.

Piecewise Functions

Use the cases environment for piecewise functions:

$$
f(x) = \begin{cases}
x^2, & x \geq 0 \\
-x^2, & x < 0
\end{cases}
$$

Rendered:

$$ f(x) = \begin{cases} x^2, & x \geq 0 \ -x^2, & x < 0 \end{cases} $$

MathJax vs KaTeX: Choosing a Rendering Engine

As mentioned earlier, LaTeX formulas in Markdown are displayed by a rendering engine. There are two mainstream options: MathJax and KaTeX.

FeatureMathJaxKaTeX
Rendering speedSlower (server-side processing)Very fast (pure client-side)
LaTeX support rangeVery comprehensiveCovers common syntax, some advanced features unsupported
Equation numberingSupportedLimited support
Cross-referencingSupportedNot supported
Font qualityMore refinedAlso good
SizeLargerVery small

In short, if you only need basic math formulas, KaTeX is faster and lighter. If you need complex LaTeX typesetting features (like numbering, cross-referencing), MathJax has more complete functionality.

Different platforms use different engines by default:

  • Jupyter Notebook: MathJax
  • GitHub: Custom engine (based on MathJax, but limited support range)
  • Obsidian: MathJax
  • VS Code (Markdown Preview Enhanced plugin): KaTeX (switchable)
  • Typora: MathJax

Reference: MathJax Official Documentation and KaTeX Supported Functions

Platform Support Comparison for Markdown LaTeX

This is something many articles don't cover well. I've personally used LaTeX formulas on GitHub, Jupyter, Obsidian, VS Code, and Typora, and I've found quite a few differences.

FeatureGitHubJupyterObsidianVS Code+PluginTypora
Inline $...$
Display $$...$$
\begin{align}
\begin{cases}
\tag{} numbering
Matrix environments
\color{}
\unicode{}Partial

GitHub has the most limited support. Once I wrote an article in Obsidian using the align environment for multi-line formula alignment — it looked great. But after pushing to GitHub, the entire formula block turned into raw code. GitHub simply doesn't recognize the align environment. I ended up having to split each formula into separate blocks.

If your article will be displayed on GitHub, stick to basic $ and $$, along with fundamental superscripts, subscripts, fractions, summations, and integrals. Matrices are supported on GitHub.

How to Configure MathJax / KaTeX

If your platform doesn't render LaTeX by default (like a self-hosted blog), you'll need to configure it manually.

MathJax 3 Configuration

Add this to your HTML <head>:

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$']],
    displayMath: [['$$', '$$']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

This configuration tells MathJax to use $...$ for inline formulas and $$...$$ for display formulas. Without this configuration, MathJax only recognizes \( ... \) and \[ ... \] by default.

KaTeX Configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
  onload="renderMathInElement(document.body, {
    delimiters: [
      {left: '$$', right: '$$', display: true},
      {left: '$', right: '$', display: false}
    ]
  });">
</script>

Jekyll / Hugo Blogs

For both Jekyll and Hugo, add the above code to your template's <head>. In Jekyll, you typically modify _layouts/default.html. In Hugo, modify layouts/partials/head.html or use shortcodes.

For Hugo, you can also configure it in hugo.toml:

[markup.goldmark.renderer]
  unsafe = true
[markup.goldmark.extensions.passthrough]
  enable = true
[markup.goldmark.extensions.passthrough.delimiters]
  inline = [["$", "$"]]
  block = [["$$", "$$"]]

Reference: Hugo Official Documentation - Mathematics, Jekyll MathJax Configuration

Common Symbol Reference

This section is for quick lookup — no need to memorize it.

Operators

SymbolSyntaxDescription
$\times$\timesMultiplication
$\div$\divDivision
$\pm$\pmPlus-minus
$\mp$\mpMinus-plus
$\cdot$\cdotDot product
$\leq$\leqLess than or equal
$\geq$\geqGreater than or equal
$\neq$\neqNot equal
$\approx$\approxApproximately equal
$\equiv$\equivEquivalent to
$\in$\inElement of
$\notin$\notinNot an element of
$\subset$\subsetSubset
$\supset$\supsetSuperset
$\cup$\cupUnion
$\cap$\capIntersection
$\emptyset$\emptysetEmpty set
$\infty$\inftyInfinity
$\partial$\partialPartial derivative

Arrows

SymbolSyntax
$\rightarrow$\rightarrow
$\leftarrow$\leftarrow
$\Rightarrow$\Rightarrow
$\Leftarrow|\Leftarrow`
$\leftrightarrow$\leftrightarrow
$\mapsto$\mapsto

Function Names

In LaTeX, function names must start with a backslash, otherwise they'll appear in italics (variable style):

# Correct (upright)
$\sin(x)$, $\cos(x)$, $\log(x)$, $\lim$, $\max$

# Incorrect (renders as italic variables)
$sin(x)$, $cos(x)$

Common function names: \sin, \cos, \tan, \log, \ln, \exp, \lim, \max, \min, \sup, \inf, \det.

Accents

EffectSyntaxUsage
$\hat{x}$\hat{x}Estimated value
$\bar{x}$\bar{x}Mean
$\vec{x}$\vec{x}Vector
$\dot{x}$\dot{x}Derivative
$\tilde{x}$\tilde{x}Transformation
$\overline{x}$\overline{x}Long average

Spacing Control

In LaTeX math mode, spaces are automatically ignored. To add manual spacing:

SyntaxWidthEffect
\,Thin space$a\,b$
\;Medium space$a\;b$
\quadLarge space$a\quad b$
\qquadExtra large space$a\qquad b$
\!Negative space$a!b$

Tips for Formula Typography

After writing a lot of formulas, I've noticed some details that don't affect correctness but make formulas look more professional:

Don't overuse \frac in exponents and integrals. Nested fractions in inline formulas make everything too compact and hard to read. For example, $\frac{d}{dx} \frac{x^2}{x+1}$ would be better written as $(d/dx)(x^2/(x+1))$ or as a display formula. \frac is fine in display formulas, but use it sparingly in inline formulas.

Use \mid instead of | in set notation. \{x \mid x > 0\} has better spacing than `{x | x > 0}$.

Use \iint and \iiint for multiple integrals instead of writing three separate \int symbols — the spacing is handled differently.

Prefer display formulas for complex expressions. Inline formulas are limited by line height, and complex content gets compressed. If your formula has more than three levels of nesting (like fractions within fractions), use $$ to put it on its own line.

Troubleshooting Common Issues

Formulas Display as Raw Code

The most common reason: math rendering is not enabled on the platform.

  • GitHub: You need blank lines before and after $$ blocks
  • Self-hosted blogs: Check that your MathJax/KaTeX configuration is correct
  • VS Code: Install the Markdown Preview Enhanced or Markdown Math extension

$ Symbol Parsed as a Formula

If you want to display a literal dollar sign (not a formula), here are a few methods:

1. Escape with backslash: \$100
2. Put it in a code block: `$100`
3. Use an HTML entity: &dollar;100

Formula Renders Differently Than Expected

A few common syntax errors:

  • x^10 → only 1 is a superscript; write x^{10} instead
  • \frac ab cd → only a and b are numerator/denominator; write \frac{ab}{cd} instead
  • Mismatched curly braces → carefully check that every { has a matching }

Formulas Not Displaying on GitHub

GitHub has natively supported LaTeX math formulas since 2022, but with a few limitations:

  1. Display formulas $$ must have blank lines before and after
  2. Advanced environments like \begin{align} are not supported
  3. Formatting commands like \color and \tag are not supported

Reference: GitHub Official Documentation - Writing Mathematical Expressions

Practical Examples

Putting the syntax together, let's look at some complete examples:

Quadratic Formula

$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Normal Distribution PDF

$$
f(x) = \frac{1}{\sigma\sqrt{2\pi}} e^{-\frac{(x-\mu)^2}{2\sigma^2}}
$$

Euler's Identity (One of the Most Beautiful Equations)

$$
e^{i\pi} + 1 = 0
$$

Matrix Multiplication

$$
\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}
\begin{pmatrix}
x \\
y
\end{pmatrix}
=
\begin{pmatrix}
ax + by \\
cx + dy
\end{pmatrix}
$$

You May Also Need

At the end of the day, markdown latex comes down to two things: remembering the difference between $ and $$, and knowing which syntax your platform supports. The syntax itself takes about half an hour to pick up — the real skill is in typography details and platform compatibility. I hope this guide helps you avoid some common pitfalls.


References: