LaTeX¶
sphinx-hextra does not ship a math renderer of its own. Math support in a
Sphinx project comes from the built-in sphinx.ext.mathjax or
sphinx.ext.imgmath extensions, plus the MyST dollarmath and amsmath
extensions for $-delimited syntax. This page walks through the full setup.
Enable the extensions¶
Start by adding the Sphinx math extension to your conf.py. For web output,
MathJax is almost always what you want — it renders client-side and looks
sharp at any zoom level:
extensions = [
"myst_parser",
"sphinx_hextra",
"sphinx.ext.mathjax",
]
Then enable the MyST dollar-math syntax so you can write $…$ and $$…$$
the same way you would in a LaTeX document:
myst_enable_extensions = [
"colon_fence",
"dollarmath",
"amsmath",
]
dollarmath turns on inline and block $ math. amsmath additionally
enables AMS environments (align, gather, multline, equation, and
friends).
Inline math¶
Wrap inline math in single dollar signs:
The area of a circle is $A = \pi r^2$.
Which renders as: The area of a circle is $A = \pi r^2$.
If you have a page that uses a lot of shell variables and you are worried
about accidental math triggers, you can disable inline dollar math and still
keep block math by passing the option to dollarmath:
myst_dmath_allow_labels = True
myst_dmath_allow_space = True
myst_dmath_double_inline = True
See the MyST dollarmath documentation for the full list of tuning knobs.
Block math¶
Double dollar signs produce a centred display equation:
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$
Which renders as:
$$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
For AMS environments, drop the dollar signs and use the environment
directly once amsmath is enabled:
\begin{align}
(a + b)^2 &= a^2 + 2ab + b^2 \\
(a - b)^2 &= a^2 - 2ab + b^2
\end{align}
The {math} role and directive¶
The classic docutils way still works and does not need dollarmath:
Inline: {math}`e^{i\pi} + 1 = 0`
Block:
```{math}
\int_0^1 x^2 \, dx = \frac{1}{3}
Pick whichever style reads more naturally. Most projects use dollar math for
everyday expressions and the `{math}` directive only when they need to label
an equation for cross-referencing.
## Labelled equations
With `amsmath` you can label an equation and reference it with `{eq}`:
```markdown
$$
e^{i\pi} + 1 = 0
$$ (eq:euler)
Equation {eq}`eq:euler` is often called "the most beautiful equation in
mathematics".
Backends¶
There are two Sphinx math backends to pick from:
sphinx.ext.mathjax(recommended) — loads MathJax from a CDN and renders math in the browser. Crisp at any zoom, searchable, selectable, accessible. Slightly slower initial page load.sphinx.ext.imgmath— renders every equation to a PNG or SVG at build time using a local LaTeX install. No runtime JS, but you now have a LaTeX dependency in your build environment and the images don’t scale as gracefully.
Unless you have a hard “no client-side JavaScript” constraint, use MathJax.
Example: the quadratic formula, end-to-end¶
Full example combining the pieces above. Put this in a .md file with
MathJax and dollarmath enabled:
# Roots of a quadratic
The quadratic formula gives the roots of $ax^2 + bx + c = 0$ as
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$ (eq:quadratic)
Equation {eq}`eq:quadratic` is real-valued when the discriminant
$\Delta = b^2 - 4ac$ is non-negative.
The rendered page shows the inline $ax^2 + bx + c = 0$ in-line with the
prose, a centred display equation below, and a live cross-reference that
Sphinx will turn into a link.