Math Formulas
Mathematics is the only part of Markdown that needs an extra engine to work at all. The syntax itself is tiny — one pair of dollar signs for a formula inside a sentence, two pairs for a formula on its own line — but a parser that only understands Markdown will hand you the raw source back, dollar signs and all, because it has no idea what to do with a fraction.
This page covers the syntax precisely, the two engines that are commonly used to render it, and the LaTeX details that trip people up: the backslash rule, the way a dollar sign in ordinary prose gets mistaken for the start of a formula, and the several ways a formula can end up as plain text on a platform that does not support math. It also gathers the commands you will reach for most often, so that the first formula you write is not a hunt through a reference manual.
An inline formula sits inside a sentence, between a pair of dollar signs:
Inline formula: $x$ in a sentence.<p>Inline formula: <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>x</mi></mrow><annotation encoding="application/x-tex">x</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal">x</span></span></span></span> in a sentence.</p>That output is longer than the input, and it is worth understanding why. The renderer emits two copies of the formula: a MathML copy, which is what a screen reader reads and what a copy-and-paste of the page carries, and an HTML copy, which is the typeset version you actually see. Both are wrapped in a span with the class katex. The dollar signs are gone; there is no literal $ anywhere in the output.
A block formula stands on its own line, and each of its two dollar signs must sit on a line of its own:
$$
x
$$<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>x</mi></mrow><annotation encoding="application/x-tex">x</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal">x</span></span></span></span></span>The difference between the two is one word in the markup: the block version is wrapped in span.katex-display instead of span.katex, and the MathML carries display="block". If you write the two dollar signs on the same line as the formula, you do not get a block — you get an inline formula, and it stays inside the paragraph.
The two engines you will meet are KaTeX and MathJax, and they take the same input: a LaTeX expression. They differ in how they work.
KaTeX renders synchronously and fast, which means the formula is already typeset in the first paint and there is no layout shift when it arrives. It is deliberately incomplete: it implements the LaTeX commands a document is likely to need, and it refuses the rest rather than guessing. MathJax covers a far larger slice of TeX and can typeset almost anything, at the cost of more code and a second pass through the browser.
The engine is the platform’s choice, not yours, and the syntax around the formula is the platform’s choice too. That second point is the one that bites. The dollar-sign convention used here comes from the Markdown layer, while MathJax’s own convention is to use \( and \[ for inline and display math. The engine does not change; what changes is which delimiters the Markdown layer recognises. Write the convention your platform documents, and check it before publishing.
A LaTeX command is a backslash followed by a name. One backslash. Two of them means something else entirely — in LaTeX, a doubled backslash is the command for a line break:
$$
\int_0^1 x^2 dx = \frac{1}{3}
$$This is the correct form: \int is the integral sign with lower limit 0 and upper limit 1, and \frac{1}{3} is a fraction whose numerator and denominator are the two braced groups. Write \\int and \\frac instead and KaTeX will typeset a line break followed by the letters “int” and “frac” — the formula still compiles, so nothing warns you, it just renders as nonsense.
The same trap exists inside the braces of a command: \frac{1}{3} takes two arguments, and each argument has to be its own braced group. This is also why a formula that contains a literal brace has to be written as \{ and \}.
Technical documentation talks about money. And a dollar sign in ordinary prose is exactly what the Markdown layer is looking for when it hunts for the end of an inline formula.
Consider the sentence “The price is 200 per month.” The parser finds an opening dollar sign before 100, and it finds the next dollar sign before 200, and it concludes that everything between them is a formula. The words “and” are now inside the formula, and the sentence is broken.
The fix is to escape the dollar signs, so that they are never treated as delimiters:
The price is \$100 and \$200 per month.<p>The price is $100 and $200 per month.</p>The escaped dollar signs come out as plain dollar signs in the text, and nothing else changes. The same treatment applies to any dollar sign you want to show literally, including the ones in the middle of a formula you are describing rather than rendering.
There are three distinct ways a formula turns into plain text, and they look different on the page.
The first is a platform with no formula engine at all. The Markdown layer still recognises the dollar signs and turns the formula into a math node, but with nothing to typeset that node it falls back to a code span, so the reader sees the LaTeX source as monospace text with the dollar signs gone. The second is a platform whose Markdown layer does not implement the dollar-sign convention at all. There the source survives untouched, dollar signs included, and the reader sees $E = mc^2$ exactly as it was typed.
The third is the delimiter mismatch mentioned above: a platform that only accepts \( and \[ will show the formula as literal text even though MathJax is loaded and ready. This course’s pipeline recognises the dollar signs, and the parenthesis form is not part of that convention, so it degrades in a way that is easy to misread — the backslashes are consumed as ordinary Markdown escapes and the reader is left with (E = mc^2), a pair of parentheses around plain characters.
One more detail is specific to MDX, the format this course is written in: a less-than sign in ordinary prose can be parsed as the start of a tag and break the build. Writing an inequality with \le, \ge, \lt or \gt inside a math span avoids the problem entirely and is the habit worth forming:
The value $a \le b$ holds for every real number.Inside a math span the sign is parsed as part of the formula, and the output contains a proper relation symbol rather than a character that a reader might mistake for markup.
The commands below cover most of what a formula needs. They are shown as LaTeX source, because that is what you type:
\frac{a}{b} % a fraction
x^2 % a superscript
a_i % a subscript
x_i^2 % both at once
\sqrt{x} % a square root
\sqrt[3]{x} % a cube root
\lvert A\rvert % an absolute value
\sum_{i=1}^{n} a_i % a summation
\prod_{i=1}^{n} a_i % a product
\int_0^1 f(x)\,dx % an integral
\alpha \beta \gamma % greek letters
\begin{matrix} a & b \\ c & d \end{matrix} % a matrix
\begin{aligned}
f(x) &= x^2 \\
g(x) &= 2x
\end{aligned} % aligned equationsTwo details in that list are worth a second look. The \lvert and \rvert commands exist because a literal pipe character would end a table cell, so absolute values in a table are written with those commands instead. And the aligned environment uses a doubled backslash to separate lines, which is the one place where two backslashes are exactly right.
| Written as | Actually renders as | Why |
|---|---|---|
$E = mc^2$ | a formula | the inline form |
$$E = mc^2$$ on one line | an inline formula | a block needs its own lines |
\$100 and \$200 | plain dollar signs | the backslash stopped the pairing |
$100 and $200 | a formula containing the words | two dollar signs make a pair |
\int_0^1 x^2 dx | an integral | one backslash per command |
\\int_0^1 x^2 dx | a line break and the letters | \\ is the break command |
\(E = mc^2\) | (E = mc^2) as plain text | this convention is dollar signs |
A formula that does not render still looks like a formula, so the mistake is easy to miss. When the platform has no math engine, the page shows a line of LaTeX source where a typeset formula should be — and a reader who knows what E = mc^2 looks like may read past it. Worse, the mistake can be invisible in the source you are editing: a stray dollar sign in prose, a doubled backslash, or a delimiter convention the platform does not support all leave the Markdown perfectly valid. The habit that catches these is to check the rendered page, not the file, and to confirm the target platform loads a formula engine before you rely on math to carry meaning.
Rewrite the following passage as Markdown. Requirements: one inline formula and one block formula; the two dollar signs of the block formula must each sit on a line of their own; every LaTeX command must use a single backslash; and the prices in the last sentence must be escaped so they cannot be read as a formula.
The mass-energy equation E=mc^2 is the most famous inline formula.
\int_0^1 x^2 dx = 1/3 is the value of the integral.
The pricing of this tool is $9 per month, and the team plan is $19 per month.Approach:
An inline formula is written between one pair of dollar signs, tight against the surrounding text. A block formula is written between two pairs, and each pair must sit on a line of its own so that the parser treats it as a display block rather than as inline math. The content of both is LaTeX, where every command takes a single backslash. The prices in the last sentence need their dollar signs escaped, otherwise the first two of them are paired into a formula and the words between them are swallowed into it.
Steps:
- Write the inline formula as
$E = mc^2$, with one dollar sign on each side and no space between the sign and the expression. - Write the block formula on its own lines: the first
$$alone on a line, then\int_0^1 x^2 dx = \frac{1}{3}on the next, then the second$$alone on a line. Both\intand\fractake a single backslash. - Leave a blank line before and after the block formula, so that it forms a block of its own instead of joining the paragraph around it.
- Escape both prices by writing
\$9and\$19. Neither dollar sign is then available to close a formula. - Check the result: the first sentence contains a typeset inline formula, the second is a centred block formula, and the last sentence shows the two prices as plain text with no formula anywhere in it.
Answer:
The mass-energy equation $E = mc^2$ is the most famous inline formula.
$$
\int_0^1 x^2 dx = \frac{1}{3}
$$
The pricing of this tool is \$9 per month, and the team plan is \$19 per month.You can now write both forms of a formula, and you know that the difference between an inline and a block formula is in the delimiters and the line breaks rather than in the LaTeX itself. You know that a command takes one backslash and that two mean a line break, that a dollar sign in ordinary prose must be escaped so it cannot be mistaken for a delimiter, and that an inequality is best written with \le or \ge inside a math span. You also know that a formula can silently arrive as plain source on a platform without an engine, or with the wrong delimiters, which is why the rendered page is the thing to check. The last page of this chapter covers the other extension that carries meaning outside the code: footnotes.