WordPress Jetpack’s Beautiful Math with LaTeX

Estimated read time (minus contemplative pauses): 10 min.

Here’s a library of WordPress-ready LaTeX, plus notes, that I’ve been collecting for self-reference. Figured I’d share.

There are far more extensive resources out there (see links below). This is mainly for helping to get started with inserting math into WordPress. It answers the basic questions I had to dig around for when I first started.

First, a few important notes.

(1) Activate (if it’s not already; it should be) the Jetpack plugin module Beautiful Math with LaTeX to use these. Do so under Jetpack Dashboard>Settings>Writing.

(1.1) Proceed, however, with the annoying fact in mind that Jetpack math is not beautiful. It produces, rather, a low-resolution image that doesn’t hold up well zoomed in on. A prettier option is the popular plugin MathJax-LaTex (which I haven’t tried) or WP-KaTeX, which claims to load 35 times fast than MathJax and which I just now tried.

KaTex looks far better than Jetpack. KaTeX generates typeface, so it looks crisp even on zooming. For it to work, however, I had to switch off the Jetpack LaTeX module. Which is to say that I can’t use both at once here. To switch, then, would mean updating all my previous posts.

Furthermore, it worries me a little that MathJax hasn’t updated in a year, and KaTeX hasn’t updated in six months. (As of today, 2/1/20.) And the KaTeX support thread shows some unresolved issues that may or may not affect many users. Possibly, KaTeX’s use of typeface may result in incompatibility issues that Jetpack needn’t worry about. Or maybe it only gets updated when there’s a WordPress update compatibility issues. I’m not sure.

Switching is mostly a matter of changing Jetpack’s opening and closing tags, which are $latex…$, to those used by KaTeX: [ latex ]…[ /latex ]* (with some exceptions, which I’ll indicate below). Making the switch even less painful is that those KaTeX tags seem to work just fine in Jetpack as well (again, with some notable exceptions), though the behavior is a little different (e.g., in terms of where it puts the output on the page, such as on the same line versus on a new line).

[*I put extra spaces in the KaTeX brackets because it otherwise would disappear, even with code tags.]

Also helpful is that the toolbar extension plugin I use, TinyMCE Advanced, features a find-and-replace function.

That said, I will stick with Jetpack. For now. If (when) I make the switch, I’ll note it here (though it’ll be obvious as the KaTeX output is so much prettier.)

Hopefully may wavering between these two worlds does not make this page too confusing.

(2) Word of warning. In the tests I’ve done, if I restore a previous draft, I lose all backslashes. LaTeX uses backslashes.

(3) You can input the LaTeX code into the text or visual editor (though take care putting into text editor; e.g., for “&” put “&amp” in text editor).

(4) Open and close code (but see point (1.1) above) with: $latex…$

(5) The default mode is inline, like this (I’ll put code in blue):

Here’s a binomial coefficient, $latex \binom{2n}{k} $, inline style.

Here’s a binomial coefficient, , inline style.

(6) For display style, simply insert “\displaystyle“, like this:

$latex \displaystyle \binom{2n}{k} $

(WP-KaTeX plugin details note that this can alternatively be accomplished, for KaTeX, with tags: [ latex display=”true” ]…[ /latex ]; again, I’ve added spaces.)

(7) Basic inline math symbols are best done with the WordPress special characters option in the toolbar. You’ll find exponents of 1, 2, and 3 there as well.

(8) Subscripts and larger exponents are best done with simple tags (in the text editor or with a toolbar extension plugin like TinyMCE Advanced).

For example, “10⁵” and “S₁” yield 10⁵ and S₁. It looks better, and you get it as text characters rather than as an image (as with Jetpack LaTeX).

(9) If you want to raise an exponent to multiple powers, you might prefer LaTeX:

$latex 10^{5^{2^{3^{4^{2^{6^{9^{7}}}}}}}} $

You can’t do that so well with ^… tags:

10^{5^{2^3⁴²6⁹7}}

10^52342697

(10) You can also manipulate sizes of text and of parentheses and such. I spell this out and give examples below.

(11) Here are some resources for finding more:

CodeCogs – a responsive code-generator I use a lot.

Desmos – easily copy and paste inline figures from Desmos such as , the code for which is $latex \sum_{n=a}^{b}\frac{1}{n^{2}} $.

Detexify – you can draw into this one.

An undergrad PDF cheatsheet with lots of basic stuff: undergradmath.pdf.

WordPress uses these LaTeX packages (with links leading to more info than I’ve ever needed):

amsmath
amsfonts
amssymb (see above link to amsfonts, and see this PDF for a straightforward listing of symbols)

(Perhaps with KaTeX or some such, more packages can be imported. I haven’t tried.)

I’ve also found this slightly helpful: https://en.wikipedia.org/wiki/Help:Displaying_a_formula. But even better is to go to a Wikipedia entry that has something you want, click “Edit,” and grab (replacing, of course, the <math>…</math> tags with $latex…$ or [ latex ]…[ /latex ]).

That should be more than enough to work out anything WordPress can do, but if you want to go beyond WordPress, this listing seems a great starting place.

Beautiful Math for WordPress with LaTeX

Ok. Here’s my elemental library. Roughly alphabetical. Should be enough to at least get you started using LaTeX with WordPress. Script size is covered in first entry. If you copy code, past as text in order to not show up as raw code.

---

Background/Foreground Color (also: Script Size)

Mainly for if you need some other background color than the default.

Sizes can be set from integers -4 to 4, indicated with &s=x as shown below (sometimes this shows up like this: \&s=x). This is specific to Jetpack, as far as I know. The numbers correspond to standard commands (e.g., as used with KaTeX):

-4  = \tiny
-3  = \scriptsize
-2  = \footnotesize
-1 = \small
0  = \normalsize (12pt; with other than Jetpack, could be 10pt or 11pt, as described here.)
1  = \large
2  = \Large
3 = \LARGE
4  = \huge

There’s a tenth command, not included with Jetpack: \HUGE

If I ever want to switch to KaTeX, I’ll need to replace any size specifications with one of the above commands (see again the above-linked document).

This is the only entry in which I’ll include size specifications. Now onto the colors.

---

For some reason, this particular content—”LaTeX”—one only works for me if there are no spaces, as shown here in two sizes.

$latex \LaTeX&bg=000000&fg=F3E94F$

---

$latex \LaTeX&bg=000000&fg=F3E94F&s=4$

---

With other content I tried it works with spaces; here are two more sizes:

$latex ^{n}C_{r} = \frac{n!}{(n-r)!n!} &bg=9C3A09 &fg=73E9F5 &s=2 $

---

$latex \mathfrak{Cool Font} &bg=000000 &fg=ff0000 &s=3 $

---

Note that these color commands don’t work with the [ latex ]…[ /latex ] tags, with or without either the KaTeX or Jetpack LaTeX plugins activated. In KaTeX, however, you’re unlikely to want a background change, as it produces typeface that does not produce a new background (recall that Jetpack creates an image).

---

Bayes’ theorem (two styles):

$latex \displaystyle P\left(A\mid B\right) = \frac{P\left(B\mid A\right)\, P\left(A\right)}{P\left(B \right)} $

---

$latex \displaystyle P\left(A|B\right) = \frac{P\left(B|A\right)\, P\left(A\right)}{P\left(B\right)} $

---

Binomial Coefficient

$latex \displaystyle \binom{r}{k} $

---

Also like this:

$latex {r \choose k} $

---

Binomial theorem

$latex \displaystyle (x+y)^n = \sum_{k=0}^n {n \choose k} x^{n – k} y^k $

---

Boxed Formula

$latex \boxed{(x+y)^n = \sum_{k=0}^n {n \choose k} x^{n – k} y^k} $

---

Calculus:

$latex \frac{\partial }{\partial x} $

---

$latex \frac{\partial^2}{\partial x^2} $

---

$latex \displaystyle \int_{1}^{2}x^{2}dx $

---

$latex \iint_{a}^{b} $

---

Combination:

$latex ^{n}C_{r} = \frac{n!}{(n-r)!n!} $

---

Cubic Formula

I’ll include a line break in this one with “\ \ \”:

$latex x= -\frac{b}{3a}+\sqrt[3]{\left(\frac{-b^{3}}{27a^{3}}+\frac{bc}{6a^{2}}-\frac{d}{2a}\right)+\sqrt{\left(\frac{-b^{3}}{27a^{3}}+\frac{bc}{6a^{2}}-\frac{d}{2a}\right)^{2} + \left(\frac{c}{3a}-\frac{b^{2}}{9a^{2}}\right)^{3}}} \ \ \ +\sqrt[3]{\left(\frac{-b^{3}}{27a^{3}}+\frac{bc}{6a^{2}}-\frac{d}{2a}\right)-\sqrt{\left(\frac{-b^{3}}{27a^{3}}+\frac{bc}{6a^{2}}-\frac{d}{2a}\right)^{2}+\left(\frac{c}{3a}-\frac{b^{2}}{9a^{2}}\right)^{3}}} $

---

Fraction

$latex \displaystyle \frac{a}{b} $

---

Harmonic Numbers

$latex \displaystyle H_n= 1+\frac{1}{2}+\frac{1}{3}+\cdots+\frac{1}{n} =\sum_{k=1}^n \frac{1}{k} $

---

$latex \displaystyle H_n = \int_0^1 \frac{1 – x^n}{1 – x}\,dx $

---

Horizontal Lines

$latex \begin{matrix}
\hline
cell1 & cell2 & cell3 \
\hline
cell4 & cell5 & cell6 \
\hline
cell7 & cell8 & cell9 \
\hline
\end{matrix} $

(Note: This one doesn’t work with the KaTeX [ latex ]…[ /latex ] tags, either with or without KaTeX activated.)

---

Hypergeometric Distribution

Copied from Wikipedia (as described above) and added “\displaystyle“.

$latex \displaystyle p_X(k) = \Pr(X = k) = \frac{\binom{K}{k} \binom{N – K}{n-k}}{\binom{N}{n}} $

where

N is the population size,
K is the number of success states in the population,
n is the number of draws (i.e. quantity drawn in each trial),
k is the number of observed successes,
is a binomial coefficient.

---

Limit (note use of “\displaystyle”):

$latex \displaystyle \lim_{x\to 1} \frac{1-x^k}{1-x^N} = \frac{0}{0} $

---

$latex \displaystyle \lim_{x\to 1} \frac{kx^{k-1}}{Nx^{N-1}} = \frac{k}{N} $

---

Matrix

$latex \begin{bmatrix}

\begin{array}a & b & c & d & e \
a_{11} & a_{12} & a_{13} & a_{14} \
a_{21} & a_{22} & a_{23} & a_{24}\
a_{31} & a_{32} & a_{33} & a_{34}\
a_{41} & a_{42} & a_{43} & a_{44}\
\end{bmatrix} $

More matrices of that sort here.

(Note: Needs some adjusting to use with KaTeX.)

---

Matrix with Labels

Will likely require some tweaking, which you can do real-time with the CodeCogs panel. If you know a better way with the packages WordPress recognizes, please let me know.

$latex \begin{array}{c c} &
\begin{array}{c c c c c c c c} 0 & 1 & 2 & 3 & 4 & 5 & 6 \
\end{array}
\
\begin{array}{c c c c c c c c}
0 \
1 \
2 \
3 \
4 \
5\
6
\end{array}
&
\left[
\begin{array}{c c c c c c c}
0 & \frac{6}{6} & 0 & 0 & 0 & 0 & 0 \
0 & \frac{1}{6} & \frac{5}{6} & 0 & 0 & 0 & 0 \
0 & 0 & 0 & 0 & 0 & 0 & 0 \
0 & 0 & 0 & 0 & 0 & 0 & 0 \
0 & 0 & 0 & 0 & 0 & 0 & 0 \
0 & 0 & 0 & 0 & 0 & 0 & 0 \
0 & 0 & 0 & 0 & 0 & 0 & 0
\end{array}
\right]
\end{array} $

---

A smaller matrix for inline:

$latex \bigl( \begin{smallmatrix} a&b\ c&d \end{smallmatrix} \bigr) $

(The \bigl tells thing to open [i.e., “l” is for “left,” I take it] with more horizontal space; the \bigr closes that. Other size options, like \biggl are available; see here for more on that, and the “Parentheses size adjust manually” below.)

---

Normal Distribution

$latex f(x) = \displaystyle \frac{1}{\sigma \sqrt{2\pi} } e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2} $

---

Parentheses size adjust manually

(For script size, see first entry here, on Background / Foreground Color.)

For big (display) parentheses, put \Big as shown below (notice also the cool calligraphy “B” symbol).

$latex \displaystyle \mathfrak{B} = \Big(\frac{5}{36}\Big) + \Big(\frac{25}{36}\Big)\mathfrak{B} $

Options available are: \big,\Big, \bigg, and \Bigg. For a list of bracket types with sizing options, go here.

All see next entry here for automatic sizing.

---

Parentheses size automatic

(For script size, see first entry here, on Background / Foreground Color.)

Framing with \left( … \right) automatically makes brackets just right size, no need to put \Big. Notice that this looks better here, compared to when using \Big in previous entry, above.

$latex \displaystyle \mathfrak{B} = \left(\frac{5}{36}\right) + \left(\frac{25}{36}\right)\mathfrak{B} $

---

Quadratic Formula

$latex \displaystyle x=\frac{-b\pm\sqrt{b^2-4ac}}{2a} $

---

Roots

$latex \displaystyle \sqrt{\pi} $

---

$latex \displaystyle \sqrt[3]{e^{x}+2} $

---

Sigma

$latex \displaystyle \sum_{i = 0}^{\infty}(2+2i)(\frac{2^{i}}{2^{(2+2i)}}) = 2$

---

Paragraph/Line Breaks

To add breaks, use as many of these as you need: \.

For example:

$latex \displaystyle \sum_{i = 0}^{\infty}(2+2i)(\frac{2^{i}}{2^{(2+2i)}}) = 2 \ \ \

\displaystyle \sum_{i = 12}^{15}(3+3i)(\frac{3^{i}}{3^{(3+3i)}}) \approx = 5.8078158375\times10^{-12} $

---

Tribonacci Numbers

Note use of rounding function. The second one is from a thing I was working on.

$latex \displaystyle \left[3\cdot\frac{\left{\frac{1}{3}\left(19+3\sqrt{33}\right)^{\frac{1}{3}}+\ \frac{1}{3}\left(19-3\sqrt{33}\right)^{\frac{1}{3}}+\frac{1}{3}\right}^x\cdot\left(586+102\sqrt{33}\right)^{\frac{1}{3}}}{\left(586+102\sqrt{33}\right)^{\frac{2}{3}}+4-2\left(586+102\sqrt{33}\right)^{\frac{1}{3}}}\right] $

---

$latex \displaystyle \sum_{n=1}^{57}\frac{1}{2^n}\left[3\frac{\left{\frac{1}{3}\left(19+3\sqrt{33}\right)^{\frac{1}{3}}+\ \frac{1}{3}\left(19-3\sqrt{33}\right)^{\frac{1}{3}}+\frac{1}{3}\right}^{n-2}\left(586+102\sqrt{33}\right)^{\frac{1}{3}}}{\left(586+102\sqrt{33}\right)^{\frac{2}{3}}+4-2\left(586+102\sqrt{33}\right)^{\frac{1}{3}}}\right] $

---

Underbrace

$latex \underbrace{LaTeX}_{under} $

---

Enjoy or find this post useful? Please consider pitching in a dollar or three to help me do a better job of populating this website with worthwhile words and music. Let me know what you'd like to see more of while you're at it. Transaction handled by PayPal.

---

Or click the banner to shop at Amazon (at no extra cost: it just gives me some of what would have gone to Amazon).

---

Further Reading

Further ReadingSelect CategoryDenotation Switch  (3)Epistemology  (13)Ethics  (16)Film  (8)Free Will  (14)Math  (21)Mind | Brain  (30)Music  (26)Philosophy  (78)Political  (14)Probability  (39)Science  (18)Social Group Ontology  (17)Technology  (14)Uncategorized  (7)Words  (17)