The Desire

Many of the topics to be posted to the blog will be mathematical in nature. Before I get too committed to using Jekyll for serving my blog, I therefore need to test out how it renders expressions that can be easily performed in languages such as LaTeX.

The Solution

According to https://jekyllrb.com/docs/extras/ it seems that these expressions are supported by importing MathJax through a script or through CSS. While CSS-only solutions avoid imposing JavaScript-enabled browsers on the reader, they will not be as good as the JavaScript counterpart. This solution therefore opts for the JavaScript approach.

Test cases

The following is a list of notations that can serve as a test for this:

  • Logic Symbols
    • Universal quantification \( \forall \)
    • Existential quantification $ \exists $
    • Conjunction $ \wedge $
    • Disjunction $ \vee $

Also, the following examples have been shamelessly copied from this post by git user zishuai

  • The Lorenz Equations

  • The Cauchy-Schwarz Inequality

  • A Cross Product Formula

  • The probability of getting (k) heads when flipping (n) coins is:

  • An Identity of Ramanujan

  • A Rogers-Ramanujan Identity

The Implementation

First Attempt and Refinements

While post by git user zishuai serves well for examples of formulas, a better site to follow for actually enabling MathJax is found at sgeos. After following the instructions at both sites and combining the best of both, the following code block has been added to _includes/head.html:

Final Results


  {% if page.mathjax %}

  <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            config: ["MMLorHTML.js"],
            extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
            jax: ["input/TeX"],
            tex2jax: {
                inlineMath: [ ["$","$"], ["\\(","\\)"] ],
                processEscapes: true
            },
            TeX: {
                TagSide: "right",
                TagIndent: ".8em",
                MultLineWidth: "85%",
                equationNumbers: {
                   autoNumber: "AMS",
                },
                unicode: {
                   fonts: "STIXGeneral,'Arial Unicode MS'"
                }
            },
            showProcessingMessages: false
        });
  </script>
  <script type="text/javascript" 
          charset="utf-8"
          src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" >
  </script>

  {%- endif -%}

If it’s not clear from above, enabling the MathJax capability on a page requires defining the liquid tag mathjax: true in the header of the Jekyl html source file.

Post-script

In addition enabling MathJax, I also discovered the Tufte CSS project in the process of performing this work. I copied the CSS files from this site and added them to the assets folder of my repo. To opt to have a page displayed in tufte format (as this one is), simply define the liquid tag tufte: true in the header of the Jekyl html source file. This will activate the following block of code within the _includes/head.html file:


  {% if page.tufte %}
  <link rel="stylesheet" href="{{ "/assets/tufte.css" | relative_url }}"/>
  <link rel="stylesheet" href="{{ "/assets/latex.css" | relative_url }}"/>
  {%- endif -%}