Displaying Equations on the Web

R Markdown

Websites are for two kinds of reader: the reader of the content and the reader of the source-code (html, css, javascript). As a recent convert to Rstudio, I used R Markdown to create a beautifully formatted webpage about Data-driven Methods for Formulating Differential Equations. While this is a blessing for the content reader, the html source-code contains several javascripts which are difficult to read (arguably obfuscated). This is a curse for the source-code reader who wants to understand how the webpage was created. In R Markdown's defence, most of these javascripts come under free licences such as the MIT licence, so the source-code reader can freely access, modify and redistribute code (provided they have the patience).

MathJax

MathJax is an open-source JavaScript library used by arXiv, MathOverflow, Wikipedia and Coursera to display mathematics. To use it I inserted the following line of code into the header of this webpage's html file.

<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML' async></script>

Using MathJax I can reproduce the first sentence of Data-driven Methods:

The following Ordinary Differential Equation (ODE) can describe the deterministic and stochastic processes of a non-linear, complex system: $$ \frac{d}{dt}\mathbf{X}(t) = \mathbf{g}(\mathbf{X}(t), t) + \mathbf{h}(\mathbf{X}(t), t)\eta(t) $$ where \(\mathbf{g}\) represent the deterministic part and \(\eta\) the stochastic part. \(\mathbf{X}(t)\) is a time-dependent \(d\)-dimensional, stochastic vector and \(\eta\) is Gaussian, white noise, satisfying: $$ \langle \eta(t) \rangle = 0 $$ and: $$ \langle \eta(t)\eta(t') \rangle = \delta(t-t'). $$ To write in-line maths, the symbols should be encased in backslash open brackets and backslash closed brackets as default. I prefer to user dollar signs instead, so I add in a second line of script to do this (please see the source-code to view the script). This makes it a little easier to write $\eta$.

Here's a great reference guide for MathJax.

Alastair Clarke
1 June 2019