How I Do MathJax II. Example

To render equations in a WordPress blog, you have several options. The most aesthetically pleasing is MathJax. An earlier post tells you how to install MathJax for your WordPress site. This second post shows a few pointers by way of an example (you’ll probably want to view the page source, then search for “For example”). Here are a few more usage examples.

How to Do Math in a Blog Post

If you’ve installed MathJax in your site, then in a blog post you can trigger the loading of MathJax by putting the shortcode at the top of your post. It will not show up in your readers’ browsers.

That’s it! You can write your post now.

What I usually do, if the document has a lot of equations, is to compose the post in the quasi-WYSIWYG LaTeX editor, LyX. You can, of course, use whatever writing tool you like. When you’re happy with how your article looks, then copy the text to the clipboard. (With LyX, open up the source pane (View→Source Pane) and select the text.) Paste to your WordPress post editor.

You now have to make one change to the pasted text: remove the line breaks inside AMS environments

\begin{...} ... \end{...}

For example,

\begin{equation}
\begin{array}[b]{ccl}
D & = & -\left(R+h\right)\cos z\pm\sqrt{\left(R+h\right)^{2}\cos^{2}z+\left[\left(R+H\right)^{2}-\left(R+h\right)^{2}\right]}\\
\\
& = & \left(R+h\right)\left(\sqrt{\cos^{2}z+\dfrac{\left(R+H\right)^{2}-\left(R+h\right)^{2}}{\left(R+h\right)^{2}}}-\cos z\right)
\end{array}\label{eq:D soln quadratic ugly}
\end{equation}

becomes

\begin{equation}\begin{array}[b]{ccl}D & = & -\left(R+h\right)\cos z\pm\sqrt{\left(R+h\right)^{2}\cos^{2}z+\left[\left(R+H\right)^{2}-\left(R+h\right)^{2}\right]}\\\\& = & \left(R+h\right)\left(\sqrt{\cos^{2}z+\dfrac{\left(R+H\right)^{2}-\left(R+h\right)^{2}}{\left(R+h\right)^{2}}} \cos z\right)\end{array}\label{eq:D soln quadratic ugly-how}\end{equation}

Here’s how to refer to the above equation. Write, for example,

eq. \eqref{eq:D soln quadratic ugly}

which renders as eq. \eqref{eq:D soln quadratic ugly-how}.

How I Do MathJax I. Installation

I use equations. To enable equations in a WordPress blog, there are several options. The most comprehensive—and aesthetically pleasing—is to use MathJax. This post tells you how to install MathJax for your WordPress site. A second post has a few pointers. Here are a few usage examples.

1. Edit default.js

I do not use the MathJax CDN since occasionally their site has problems. When that happens, your math stops working and your pages containing math become ugly. So I download MathJax to my WordPress install. Rather than futz with <script> tags in my site’s header, I edit the default configuration file to my liking. Thus:

  • Download the latest version of MathJax: go to https://github.com/mathjax/MathJax/, click on Releases, and download the latest version.
  • Unpack the archive file to your hard drive.
  • Edit default.js in the config directory. My preferences:
    • You’ll probably want to add to your extensions, something like:
      extensions: ["tex2jax.js", "TeX/AMSsymbols.js", "TeX/AMSmath.js"]
    • Scroll down and set messageStyle to your liking (I changed mine to messageStyle: "simple").
    • Scroll down to menuSettings and change these to your liking (I set zoom: "Hover").
    • In the tex2jax section that immediately follows:
      • Under inlineMath uncomment the line with inline delimiters ['$','$']. This enables normal LaTeX inline delimiters. You’ll have to escape actual dollar signs with \\\$.
      • processEscapes: true
      • preview: "[math]"
    • Scroll down to the TeX section.
      • Under equationNumbers, set autoNumber: "AMS".
      • Fiddle with whatever else there catches your fancy.
    • Fiddle with whatever else catches your fancy.
  • Finally, upload your entire MathJax directory to your WordPress site, something like http://yourdomain/mathjax/.

2. Get the WordPress plugin.

Next, get the MathJax-LaTeX plugin and set the settings. The easiest way is to go to your blog administration Dashboard→Plugins→Add New, and type mathjax in the search box. My plugin settings (Dashboard→Settings→MathJax-LaTeX) are

  • Force Load = unchecked
  • Default [latex] syntax attribute = inline (this seems to have no effect with my configuration)
  • Use wp-latex syntax? = unchecked
  • Use MathJax CDN Service? = unchecked
  • Custom MathJax location? = http://yourdomain/mathjax/MathJax.js
  • MathJax Configuration = default

Do not forget to click the Save Changes button!

image lightbox test

 

M37-g15d053.020.SDSSR_.c.stack-159.fits

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at nunc pulvinar augue volutpat gravida id vitae felis. Aliquam rutrum nisl nunc. Phasellus venenatis ultrices est, eget varius leo porta sit amet. Donec varius dignissim tortor, et tincidunt turpis posuere quis. Aenean commodo, sem sit amet ullamcorper volutpat, magna mauris bibendum magna, eget aliquam est libero non tortor. Ut non ante augue. In dignissim turpis nec lacus fermentum dictum. Morbi nisi orci, semper vel congue gravida, finibus at sem. Sed euismod tincidunt faucibus. Nulla sed mauris at nibh pharetra placerat. Vestibulum placerat sagittis rutrum. Sed libero mi, molestie eu massa et, aliquam suscipit lorem. Vivamus consequat dapibus nisl eu posuere. In vitae erat nec nisl hendrerit varius efficitur a enim. Pellentesque aliquet risus finibus tristique suscipit.