jon.hk

Chemical formulae in WordPress

— by

Jon Chui

As I will be writing a fair bit of chemistry, it was worthwhile to setup infrastructure. Good infrastructure would make the creation process less painful, and creative product versatile (usable in a variety of contexts).

There are three classes of chemistry specific items on my wish-list:

  1. chemical formula (e.g., \(\ce{NH3\gas{} + H2O\liquid{} <=>> NH3\aq}\)),
  2. full / skeletal structural formula, and
  3. 3D structures

This article is about setting up the first item, chemical formulae.

Survey of the landscape

When it comes to writing chemistry simply and have it formatted right, LaTeX-format is the only game in town. For example, this fictional equation in LaTeX markup looks like this:

$$\ce{NH3\gas{} + H2O\liquid{} <=>> NH3\aq}$$

\ce{NH3\gas{} + H2O\liquid{} <=>> NH3\aq}

Instead of the eye-sore that is plain HTML (I can’t even bring myself past the ammonia):

NH<sub>3</sub><sub><span color="#A38080">(g)</span></sub>

In 2023, however, there is a variety of ways to use this markup in web / WordPress. The following diagram gives an overview.

Javascript Engine

There are three JS engines that would take LaTeX markup and convert the instructions into suitable images. 1 In general, KaTeX is speedier2 but at the cost of less flexible outputs; Mathjax 3 can output to SVG / MathML. I am a big fan of being to to crowbar the SVG out of a page (e.g., to bring it into Illustrator, Keynote, or other LaTeX-blind applications), and thus much prefer Mathjax 3 despite the slight speed difference.

LaTeX package

A little complication about “LaTeX chemistry markup. There is not one, but two separate systems:

  • mhchem. By Martin Hensel, this was around forever, extremely well-maintained, and can be used for LaTeX, Mathjax, and KaTeX (🔗 documentation).
  • chemformula. A newer package written by Clemens Niederberger (🔗 package home), this is LaTeX only. It is part of the behemoth chemmacros package, which have short-hand markup to draw orbitals, enthalpy level diagrams, etc.

While I use and prefer chemformula in my LaTeX writing, for web usage there is really no alternative to mhchem. Fortunately, their syntax are mostly compatible, and a selection of what I use can be specified as macros in the preamble.

WordPress plugin

WordPress defaults to reading LaTeX markup with a short-code. For my usage, however, that is simply not sufficient. I needed three extras:

  1. being able to load mhchem (and other packages),
  2. being able to configure Mathjax, and
  3. being able to specify a preamble

These can be accomplished as plugins, and here there are a dozen choices. While mathjax-latex has the most downloads, I had no success in getting it to take my custom macros by header injection. Simple mathjax, on the other hand, has configuration and preamble built in by design, and require no extras.

Procedure

  1. install simple_mathjax
  2. add custom configurations
  3. add custom preambles
  4. write

By default simple_mathjax uses $ for inline LaTeX, which can be rather intrusive. In the configuration I’d set this to something else. My (abridged) configuration looks like this:

MathJax = {
      tex: {
        inlineMath: [['\\(', '\\)']], // this uses /( content /) instead of $ content $
        packages: {'[+]': ['mhchem']},
        macros: {
                  aq: ["{\\color{#0064a6}\\mathrm{_{(aq)}}}"], // shorthands for colored states of matter
                  molar: ["{\\mathrm{mol \\cdot{} dm^{-3}}}"], // ah, so much nicer!
                  celsius: ["{\\mathrm{^{\\circ}C}}"],
                }
      },
      svg: {
        scale: 1.5
      },
      loader: {load: ['[tex]/mhchem']},
    };

This makes it fast-as-thinking to write \(1.00 \molar{} \ce{C6H12O6\aq{}}, 25 \celsius{}\) inline using the following markup:

1.00 \molar{} \ce{C6H12O6\aq{}}} 25 \celsius{}

Extracting SVGs

By default this setup renders LaTeX as CommonHTML. When I need to pluck the SVG out, what I do is to right-click (ctrl-click) on the formula, and change the renderer to SVG.

This, together with browser SVG Export extensions, give the downloadable images.

Sample outputs

$$\ce{^{0}_{-1}n^{-}}$$

$$\ce{X\solid{} <=>>[$k_{fwd}$][$k_{bkw}$] X\gas}$$

$$\ce{C6H5-CHO\liquid}$$

$$\ce{Cu^{II}SO4*5H2O}$$

$$2.4 \pm{} 0.2 \cmc$$

$$\pu{1.23e4 kJ/mol}$$

These are generated from the following markups:

\ce{^{0}_{-1}n^{-}}

\ce{X\solid{} <=>>[$k_{fwd}$][$k_{bkw}$] X\gas}

\ce{C6H5-CHO}\liquid{}

\ce{Cu^{II}SO4*5H2O}

2.4 \pm{} 0.2 \cmc

\pu{1.23e4 kJ/mol}
  1. Mathjax 3 is a complete re-write and is entirely different than Mathjax 2 . ↩︎
  2. Speed here is complex. See this discussion on Google Groups about nuances in benchmarking. ↩︎
,
, ,

Newsletter

Leave a Reply