How to Write Mathematical Expressions on the Web

I've been finding methods for writing mathematical expressions in blogging tools such as Ghost, since I foresaw an occasion where I would need to pretty print sigmas or fractions in my blog post. After a short amount of research, I came across several great libraries such as jqMath or MathJax. There's actually a good post that talks about the overall idea of how to express mathematical expressions on the web. Among the many alternatives, I decided to go with jqMath due to its simplicity, speed, support for LaTeX syntax, and nice integration into Ghost.

Thus, this post is mainly about how to get jqMath working for Ghost blog owners or others who wish to write mathematical expressions on the web.

Setup

  1. Including the Library
    They have a download link provided on their website, but I find it easier to just include the script link right away in the page's code (usually at the end of the body). Do notice that this depends on jQuery, so it should be added at the point after jQuery is included.

    <script src="//mathscribe.com/mathscribe/jqmath-etc-0.4.3.min.js"></script>
    
  2. Including the Stylesheet
    Same as the above, much easier to include the link to it directly.

    <link rel="stylesheet" href="//mathscribe.com/mathscribe/jqmath-0.4.3.css" />
    

    I've noticed that this somehow gets messed up by some default styles from the blogging framework, such as adding background colors to <td> elements and not center-aligning them. In order to quick fix this, I overrode the following styles:

    <style>
    fmath td {
      background-color: transparent !important;
      text-align: center !important;
    }
    </style>
    

Usage

They have the usage documented on their website, but in a nutshell, it's basically the same as using LaTeX, such as:

  • $, or \( and \), to delimit inline mathematics
  • $$, or \[ and \], to delimit block or “display” mathematics

Examples

These are some nice examples that I've found on the web:

  • If \$ax^2+bx+c=0\$ with \$a≠0\$, then: \$\$x={-b±√{b^2-4ac}}/{2a}\$\$ becomes:
    If $ax^2+bx+c=0$ with $a≠0$, then: $$x={-b±√{b^2-4ac}}/{2a}$$
  • \$\$∑↙{i=0}↖n i={n(n+1)}/2\$\$ becomes:
    $$∑↙{i=0}↖n i={n(n+1)}/2$$
  • \$\${1+√5}/2=1+1/{1+1/{1+⋯}}\$\$ becomes:
    $${1+√5}/2=1+1/{1+1/{1+⋯}}$$
Open Comments