Some notes on the nuts and bolts of this thing.

  • \LaTeX in WordPress
  • Pretty Images

LaTeX in WordPress

This blog would be much harder to maintain with out WordPress’ built in support for LaTeX markup. That said, using LaTeX in WordPress does present a few challenges; this page contains a bunch of tips I’ve learned about how to wrestle the markup into submission.

Centered math elements

Suppose you have a large formula that would look better set apart from the surrounding text, like the \displaymath environment in LaTeX. Just stick the formula inside a div tag with style="text-align:center;". For instance, the markup

<div style="text-align:center;">
$latex \frac{\mathrm{Big\ Thing}}{\mathrm{Small\ Thing}} = \displaystyle\sum_{i \in \mathbb{N}} \mathrm{Blah}$


\frac{\mathrm{Big\ Thing}}{\mathrm{Small\ Thing}} = \displaystyle\sum_{i \in \mathbb{N}} \mathrm{Blah}.


You might notice that even if you write a post in “raw HTML mode”, WordPress preprocesses your text – for instance, to replace certain symbols with entity codes. The preprocessor indiscriminately munges these symbols inside latex fragments as well, such as the ampersand symbol used to separate cells in a matrix. Evidently the latex interpreter WordPress uses is smart enough to handle this, so that matrices work as usual. Just ignore the fact that ampersands are replaced by &amp;s.

\begin{bmatrix} 1 & 0 & 0 & \cdots & 0 \\ 0 & 1 & 0 & \cdots & 0 \\ 0 & 0 & 1 & \cdots & 0 \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ 0 & 0 & 0 & \cdots & 1 \end{bmatrix}

HTML Entity Codes

The list of HTML entity codes is quite handy if WordPress mangles your carefully crafted text- especially text containing lots of weird characters (like source code).

Especially important are the codes for < (&lt;) and > (&gt;). If you use these characters in their un-entity-coded version, wordpress will think that any text between two angle brackets is a malformed HTML tag and delete it. I have had several paragraphs disappear in this fashion. It is not fun.

Special Symbols

I can never remember these.

Symbol Name Latex
\rtimes Semidirect product with left normal factor \rtimes
\varinjlim Injective/Direct limit \varinjlim
\varprojlim Projective/Inverse limit \varprojlim
\vartriangleleft Normal subgroup \vartriangleleft
\mathfrak{Fraktur} Fraktur script \mathfrak{Fraktur}
\mathcal{CALLIGRAPHIC} Calligraphic script (upper case only) \mathcal{CALLIGRAPHIC}
\mathsf{Sans\mbox{-}serif} Sans-serif script \mathsf{Sans\mbox{-}serif}
\dfrac{a}{b} Display style fraction \dfrac{a}{b}
\binom{n}{k} Binomial Coefficient/”choose” operator \binom{n}{k}

Pretty Images

Commutative Diagrams

As far as I can tell, WordPress’ latex support – while very nice! – does not include any commutative diagram packages. To work around this, we have several options. My favorite is to use; this is a web-based service that compiles latex to png images and which supports the xy package. The Guide to Commutative Diagrams Packages has lots of examples. More in-depth information on the xy package (which is quite powerful) can be found in the xy-pic User’s Guide and the xy-pic Reference Manual.

For example, the following code…


\xymatrix{1 \ar[r] & A_1 \ar[r]^{\iota_1} \ar[d]^{\alpha} & B_1 \ar[r]^{\pi_1} \ar[d]^{\beta} & C_1 \ar[r] \ar[d]^{\gamma} & 1 \\ 1 \ar[r] & A_2 \ar[r]_{\iota_2} & B_2 \ar[r]_{\pi_2} & C_2 \ar[r] & 1}

…produces this diagram.

Example commutative diagram using latex+xymatrix

A commutative diagram

Lattice and Graph diagrams

The graphviz library is good for making pretty lattice diagrams. A web interface can be found here.

Flow and other charts

The ditaa library is handy for converting ASCII diagrams into nice vector art. The main difference between ditaa and graphviz is that ditaa doesn’t do any of the arrangement for you. A web interface can be found here.


  • Jen  On September 14, 2010 at 8:33 pm

    Oh, this is great, thanks for sharing!

  • Eri  On February 12, 2011 at 12:18 pm

    WP scrubs the align attribute because it is deprecated in HTML. Use style=”text-align:center;” inside a DIV tag instead.

    Great collection, by the way.

    • nbloomf  On February 12, 2011 at 1:12 pm

      Thanks for the tip! I spent about half an hour wrestling with that and never thought to use “style”.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: