Back to home

MathJax LaTeX Guide

An exercise in math typography

Contents

Playground

Type LaTeX (and HTML) below and see it rendered live with MathJax.

Use $...$ for inline, $$...$$ for display.

What is MathJax?

MathJax is a JavaScript library that renders LaTeX-style mathematics directly in the browser. Instead of embedding images of equations or relying on a full LaTeX compiler, we can write math inline in our HTML using familiar LaTeX syntax, and MathJax will typeset it on the client side.

Why I’m using MathJax here

This projects site may include formulas, derivations, and notes from math and finance. Rather than inventing a custom notation or relying on plain text, MathJax lets me:

How I implemented MathJax

I configured MathJax once in the global <head> section (in base.html). I load it from a CDN and tell it which delimiters to treat as math. The setup looks roughly like this: 

<script>
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']]
    },
    svg: { fontCache: 'global' }
  };
</script>

<script id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>

With this configuration in place, any template on the site can use the delimiters below and MathJax will automatically find and render the math when the page loads.

Delimiters

There are four main delimiters for LaTeX support on MathJax:

Inline Math

For inline math, we typically use the dollar sign delimiters: $ ... $. The parentheses delimiter, \( ... \), is also supported for inline math, but it's less common. If we are using financial notation that includes dollar signs, we may prefer to use the parentheses delimiters to avoid confusion. Functionally, the two are identical.

Example: The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$. And we can show a simple integral: $\int x^n \, dx = \frac{x^{n+1}}{n+1}$.

Display Math

For display math, we typically use the double dollar sign delimiters: $$ ... $$. The brackets delimiter, \[ ... \], is cleaner and more formal as it will not collide with JavaScript templates or Markdown renderers. Again, if there is a conflict with dollar signs in financial notation, we may prefer to use the brackets delimiters. Functionally, the two are identical.

Example:

$$ \int_0^1 x^n \, dx = \frac{1}{n+1} $$

Another example:

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

Custom Styling

Most of the site uses Bootstrap, but for math notes I layer on a small LaTeX-inspired stylesheet. I use three classes: latex-inline for short phrases, latex-block for full note-style sections, and latex-section for LaTeX-style section headers. Together they switch the typography to Computer Modern, tighten the spacing, and narrow the text width so it feels closer to a real LaTeX document. 

.latex-block {
  font-family: "Computer Modern Serif", serif;
  font-size: 1.08rem;
  line-height: 1.55;
  max-width: 80ch;
  width: 80%;
  margin: 2.5em auto 0.8em;
  color: #111;
  letter-spacing: -0.01em;
}

/* Headings inside a LaTeX block */
.latex-block :is(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  font-weight: normal;
  margin-top: 1.5em;
  margin-bottom: 0.8em;
}

.latex-inline {
  font-family: "Computer Modern Serif", serif;
}

/* Centered, small-caps LaTeX-style section */
.latex-section {
  text-align: center;
  font-variant: small-caps;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  margin-top: 2.5em;
  margin-bottom: 1.2em;
}

LaTeX Inline Class

latex-inline is for short stretches of text inside a paragraph. Wrap a phrase in a <span> and it will use the Computer Modern font so the surrounding prose matches the equations.

Example: The quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$, and a basic power rule is $\int x^n \, dx = \frac{x^{n+1}}{n+1}$. Then we return to the normal site font here.

LaTeX Block Class

latex-block is for full note-style sections. Applied to a <div>, it narrows the measure, adjusts line height and letter-spacing, and restyles headings so the whole block reads like a page from a LaTeX article.

Example:

1. Exponential Function and Its Derivative

Consider the exponential function $f(x) = e^{ax}$, where $a$ is a real constant. One of its most important properties is that its derivative is proportional to the function itself. To see this, we compute $$ \frac{d}{dx} e^{ax} = a e^{ax}. $$ This differential equation, $$ f'(x) = a f(x), $$ characterizes exponential growth (or decay) and appears throughout probability, finance, and differential equations.

Using LaTeX in Flask Variables

When inserting LaTeX into Python strings, backslashes must be escaped: 

eq = r"$$ \\frac{a}{b} $$"

And rendered with {{ eq|safe }}.

What MathJax Does NOT Do

MathJax supports LaTeX-style math, but not the full LaTeX document language. Commands like \section, \begin{itemize}, \maketitle, \newcommand, etc., are not supported. Only math-mode commands are rendered.