web
latex
MathJax in Jekyll
I describe how I include MathJax using Euler fonts.
Non-Standard Fonts
I follow the instructions in this blog on getting MathJax support in Markdown using Jekyll. However, to better match the Palatino text font, I use the Euler Math font, which MathJax can be configured to use. A nice place to try out the different available fonts is here.
I decided to include the mathjax scripts only on those pages,
where it is actually used, so I created a new _include
file
mathjax.html
with the usual MathJax contents:
<script type="text/x-mathjax-config">
var font = "Neo-Euler";
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$']],
displayMath: [['\\[','\\]']],
processEscapes: true,
},
"SVG":{
font:font
},
"HTML-CSS": {
webFont: font,
imageFont: font,
preferredFont: font,
availableFonts: [],
scale: 85,
mtextFontInherit: true
}
}); </script> <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
By starting a new page with {% include mathjax.html %}
,
MathJax support is enabled—and it works out of the box: $\sqrt x$.
By default, double dollars are used to delimit math, but it can also be configured to work with single dollars $\sum_{i=1}^n i^2 = \frac{n(n+1)(2n+1)}{6}$.
Using macros
Using macros with MathJax is possible, but the support is limited;
\newcommand
with optional parameters does not seem to work.
In Jekyll, one runs into trouble with opening braces followed by % parts
since these are interpreted as
liquid tag opening.
However, basic macros do work. One can define a macro in one part
and use it later on that page.
It is best practice to put definitions in a separate display:none
div to not influence the layout.
<div style="display:none">
$
\newcommand\testmacro[2]{\mathbf{F\alpha}(#1)^{#2}}
$
</div>
Then we can use $\testmacro{17}{\text{hallo}}$
to get
$\testmacro{17}{\text{hallo}}$.
Font Trouble
Not all fonts work as they should with Euler math;
switching to \mathrm
or \mathit
does not work:
$\mathrm{mathrm}$ and $\mathit{mathit}$ both use the ordinary Euler
font intended for single-letter variables—this is ugly.
With the mtextFontInherit
inherit option, we can at least use
\text
to get multi-letter variables in roman font
$x+2\cdot\text{slope}$, but they do not seem to inherit further
attributes like italic text $\text{math}$.
Further Resources
- A comprehensive list of commands/macros that MathJax knows.
- A few common usage examples.