Math with LaTeX

Reviewed & published by Brayan K

By the end of this lesson you'll write mathematical notation inside Markdown — inline formulas in a sentence and centred display equations — using LaTeX syntax that KaTeX, MathJax, and GitHub render into crisp typeset math.

Part of the free Markdown course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn

• Write inline math between single $ delimiters
• Write centred display equations between $$ delimiters
• Build fractions with \frac and roots with \sqrt
• Add superscripts (^) and subscripts (_)
• Use Greek letters, sums, and integrals
• Know that KaTeX, MathJax, and GitHub render the math

1. Inline vs Display Math

There are two ways to place math. Inline math sits inside a sentence and is wrapped in single dollar signs: $A = \pi r^2$. Display math stands on its own centred line and is wrapped in double dollar signs $$ ... $$. Use inline for a quick symbol in prose, and display for an important equation you want to highlight.

The area of a circle is $A = \\pi r^2$, and the
quadratic formula is $x = \\frac{-b \\pm \\sqrt{b^2 - 4ac}}{2a}$.

The area of a circle is A = πr2, and the quadratic formula is x = −b ± √(b2 − 4ac)2a.

The Gaussian integral is a classic result:

$$
\\int_{-\\infty}^{\\infty} e^{-x^2}\\, dx = \\sqrt{\\pi}
$$

2. Common LaTeX Syntax

Fraction:      \\frac{a}{b}
Superscript:   x^2   and   x^{n+1}
Subscript:     a_i   and   a_{i+1}
Greek:         \\alpha \\beta \\gamma \\pi \\theta
Sum:           \\sum_{i=1}^{n} i
Integral:      \\int_0^1 x\\, dx
Square root:   \\sqrt{2}   and   \\sqrt[3]{8}

Greek: α β γ π θ

Integral: ∫01 x dx

Square root: √2, ∛8

🎯 Your Turn #1: an inline exponent

Fill in the blanks so the program prints an inline formula with a base and an exponent, then run it. Inline math uses single $ delimiters.

// 🎯 YOUR TURN — write an INLINE formula.
// Inline math sits between single dollar signs inside a sentence.
// Fill in each ___ then press "Try it Yourself".

const base = "___";   // 👉 the base, e.g. x
const power = "___";  // 👉 the exponent, e.g. 2

console.log("The expression $" + base + "^" + power + "$ is read aloud as");
console.log(base + " to the power of " + power + ".");

// ✅ Expected printed source (example):
//    The expression $x^2$ is read aloud as
//    x to the power of 2.
//
// On GitHub, $x^2$ renders as x with a raised 2.

3. Who Renders the Math

The dollar-sign syntax does nothing by itself — a math engine must process it. KaTeX is fast and popular in documentation sites; MathJax is older and supports a wider slice of LaTeX. GitHub renders math in Markdown using single-$ inline and $$ block delimiters. Many static site generators add KaTeX or MathJax through a plugin, so the same source works across them.

Here's a worked example that prints real LaTeX source for inline and display math. Run it, read each printed line, then paste an $...$ or $$...$$ snippet into a math-aware Markdown file to watch it typeset.

## Inline math (single dollars)
Einstein wrote $E = mc^2$ in 1905.

## Block / display math (double dollars)
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

## Symbols cheat line
Greek: \alpha \beta \pi   Sum: \sum_{i=1}^{n} i

<!-- ✅ Expected result, rendered:
     h2 -> text: Inline math (single dollars)
     h2 -> count: 3
     p  -> count: 3
-->

🎯 Your Turn #2: a display fraction

// 🎯 YOUR TURN — write a DISPLAY fraction.
// A fraction is \frac{numerator}{denominator}; display math uses $$.
// Fill in each ___ then press "Try it Yourself".

const top = "___";     // 👉 the numerator, e.g. 1
const bottom = "___";  // 👉 the denominator, e.g. 2

console.log("$$");
console.log("\\frac{" + top + "}{" + bottom + "}");
console.log("$$");

// ✅ Expected printed source (example):
//    $$
//    \frac{1}{2}
//    $$
//
// Between $$ ... $$ this renders as a centred one-half fraction.

4. Escaping Dollar Signs

Because $ opens and closes math, a literal dollar amount in your prose — like a price — can be mistaken for the start of a formula. To show a real dollar sign where math is enabled, put a backslash before it: \$5. This only matters in renderers that have math delimiters switched on; elsewhere a plain $ is fine.

Wrong (misread as math): It costs $5 to $10.
Right (escaped dollars): It costs \\$5 to \\$10.

In math mode itself, dollars OPEN and CLOSE the formula,
so a literal price in prose needs a backslash before each $.

Without escaping, the text between the two dollar signs is swallowed into a (broken) formula.

With escaping: It costs $5 to $10. The prices show literally.

Common Errors (and the fix)

• My math shows as plain text. The renderer has no math engine. Test on GitHub or enable KaTeX/MathJax in your site.
• A price triggered math. Two unescaped $ signs in a line opened a formula. Escape literal dollars as \$.
• Unknown command error. A misspelled or unsupported macro (or a missing backslash) breaks rendering. Check the command name and that KaTeX supports it.
• Unbalanced braces. Every needs a matching ; a missing brace can blank the whole equation.

📋 Quick Reference — LaTeX Math

Mini-Challenge: The Quadratic Formula

No blanks this time — just a brief and an outline. Use console.log to print the source for the quadratic formula as a display equation, using \frac, \pm, and \sqrt between $$ fences.

// 🎯 MINI-CHALLENGE: print the quadratic formula as display math.
// Build (with console.log) the SOURCE so it includes:
//   1. An opening $$ on its own line
//   2. The formula: x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
//      (uses \frac, \pm for plus-or-minus, and \sqrt for the root)
//   3. A closing $$ on its own line
//
// ✅ Expected printed source (shape):
//    $$
//    x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
//    $$
//
// Paste it into a math-aware Markdown file to see the equation render.

// your code here

Pro Tips

• 💡 Brace your groups. Use braces around anything longer than one character after ^ or _ so the whole piece is raised or lowered.
• 💡 Display for the big ones. Reach for $$ when an equation is the focus; inline $ keeps small symbols in the flow of text.
• 💡 Check engine support. KaTeX covers most everyday math but not every macro; if something fails, MathJax may render it.
• 💡 Preview before committing. A KaTeX or MathJax sandbox shows the typeset result so you can catch a stray brace early.

Frequently Asked Questions

Q: Is math part of standard Markdown?

No. CommonMark has no math syntax; the dollar-sign delimiters are an extension that a renderer (with KaTeX or MathJax) must support.

Q: KaTeX or MathJax — which is better?

KaTeX renders faster and is great for the common cases; MathJax supports more of full LaTeX. Many sites default to KaTeX and fall back to MathJax for advanced needs.

Q: Will my math show on GitHub?

Yes. GitHub renders inline $...$ and block $$...$$ math in Markdown files, issues, and comments.

Q: How do I write a literal dollar amount near math?

Escape it as \$ so the renderer treats it as a character rather than a math delimiter.

Lesson Complete! 🎉

• ✅ Inline math uses single $; display math uses $$
• ✅ KaTeX and MathJax render the LaTeX; GitHub supports both delimiters
• ✅ ^ raises and _ lowers; brace multi-character groups
• ✅ Greek letters, \sum, and \int cover most everyday notation
• ✅ Escape a literal price as \$ where math is enabled

Where to go next: you've now seen several Markdown extensions; next, learn why they differ. Continue to Markdown Flavors: GFM vs CommonMark to write portable Markdown.

Practice quiz

Continue this course

• Previous: Diagrams with Mermaid
• Next: Markdown Flavors: GFM vs CommonMark — How CommonMark, GitHub Flavored Markdown and others differ — and writing portable docs
• Quick reference: Markdown cheat sheet