Math with LaTeX
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.
Learn Math with LaTeX in our free Markdown course — an interactive lesson with worked examples, a practice exercise and a quick reference.
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
💡 Real-World Analogy
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 = πr 2 , and the quadratic formula is x = −b ± √(b 2 − 4ac) 2a .
∫ −∞ ∞ e −x² dx = √π
2. Common LaTeX Syntax
🎯 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.
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.
🎯 Your Turn #2: a display 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.
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
Concept
Syntax
Inline math
$ ... $
Display math
$$ ... $$
Fraction
Power / index
x^2 , a_i
Greek
\alpha \pi \theta
Sum / integral
Literal dollar
\$
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.
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
No. CommonMark has no math syntax; the dollar-sign delimiters are an extension that a renderer (with KaTeX or MathJax) must support.
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.
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
Which delimiters typically wrap INLINE math in Markdown?
- Single dollar signs on each side
- Double pound signs
- Single backticks
- Square brackets
Answer: Single dollar signs on each side. Inline math is usually written between single dollar signs, like a formula inside a sentence.
How is a DISPLAY (block) equation usually delimited?
- With angle brackets
- With one dollar sign each side
- With double dollar signs each side
- With triple backticks
Answer: With double dollar signs each side. A centred display equation is wrapped in double dollar signs above and below.
Which engines commonly render LaTeX math in Markdown?
- Babel and Webpack
- KaTeX and MathJax
- Sass and Less
- Pandoc filters only
Answer: KaTeX and MathJax. KaTeX and MathJax are the two libraries that turn LaTeX math into rendered formulas in the browser.
What does the LaTeX command for a fraction look like?
- div(a)(b)
- over a b
- ratio{a}{b}
- frac with a numerator and denominator in braces
Answer: frac with a numerator and denominator in braces. A fraction is written with the frac command followed by the numerator and denominator each in braces.
How do you write a superscript (exponent) in LaTeX math?
- With a caret before the exponent
- With two stars
- With a backslash
- With double brackets
Answer: With a caret before the exponent. A caret raises the next character or braced group, giving an exponent like x squared.
How do you write a subscript in LaTeX math?
- With a forward slash
- With an underscore before the subscript
- With a tilde
- With a colon
Answer: With an underscore before the subscript. An underscore lowers the next character or braced group, producing a subscript.
How is the Greek letter alpha written in LaTeX?
- alpha()
- @alpha
- #alpha
- A backslash followed by alpha
Answer: A backslash followed by alpha. Greek letters are commands: a backslash then the name, so alpha becomes the lowercase Greek letter.
Which command produces a summation symbol?
- sigma-add
- addrange
- A backslash sum, often with sub/superscript bounds
- total()
Answer: A backslash sum, often with sub/superscript bounds. The sum command draws the summation sign; underscore and caret add the lower and upper bounds.
Does GitHub render LaTeX math in Markdown?
- Only inside code blocks
- Yes, using dollar and double-dollar math delimiters
- Only in issues, not files
- No, never
Answer: Yes, using dollar and double-dollar math delimiters. GitHub supports math with single-dollar inline and double-dollar block delimiters, rendering via its math engine.
Why might you need to escape a dollar sign in Markdown math contexts?
- To stop a literal dollar amount from being read as the start of math
- Because math requires three dollars
- To change the font colour
- Dollar signs are illegal in Markdown
Answer: To stop a literal dollar amount from being read as the start of math. Where math delimiters are active, a literal $ (like a price) can be misread as opening math, so it is escaped with a backslash.
Continue this course
- Previous: Diagrams with Mermaid
- Next: Markdown Flavors: GFM vs CommonMark