# Finally switched to Jekyll with Mathjax!

I finally decided to migrate various of my old writing in my faculty website at UC Irvine (deactivated as of Oct 2020) a static website generator Jekyll. Apparently Jekyll has a much more flexible and pleasant editing experience than WordPress, as I am using VSCode to do everything nowadays (teaching numpy, $\LaTeX$, MATLAB, and some markdown writings).

## Example of Python snippets

The following function, which is an explicit implementation of 3-layer neural net backpropagation in numpy , was used in UC Irvine Math 10, an introductory machine learning class I designed circa 2019. We can use liquid syntax to write code block in Markdown, while enabling line numbers if we set the kramdown syntax highlighter engine to rouge.

## Mathjax with LaTeX

The following instruction follows a post at Brendan A R Sechter’s Development Blog with some simplifications if we are either mathematicians, or want to add MathJax to every post semi-default. First we need to add a renderer in certain style file in _layout, by adding the following code block to default.html; Alternatively if we are using Minimal Mistakes template, we wanna add this block to scripts.html under _includes folder.


<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\$","\$"] ],
displayMath: [ ['$$','$$'], ["\$","\$"] ],
processEscapes: true
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>



Then either  or \$\$ gives us inline math as the html above suggests. Notice the engine here directly rips from mathjax.org, I have seen bloggers complained that it does not support external rendering anymore(?), yet based on my experience it is not the case.

Now we can write some famous formulae like:

$E = mc^2, \tag{The most famous formula?}$

or multiline equation without the \begin{aligned}\end{aligned} or equivalence environment needed for a $\LaTeX$ compiler like pdflatex or xelatex,

$\displaystyle \int_{\Omega} \nabla \boldsymbol{\phi} : \nabla\boldsymbol{\psi} = \int_{\Omega}\Big( (\nabla\times \boldsymbol{\phi}) \cdot (\nabla\times \boldsymbol{\psi}) + (\nabla \cdot \boldsymbol{\phi}) (\nabla \cdot \boldsymbol{\psi}) \Big) \\ \displaystyle \quad + \int_{\partial \Omega} \Big( \underbrace{\nabla_{\Gamma}(\boldsymbol{n}\cdot \boldsymbol{\phi}_n)\cdot \boldsymbol{\psi}_{\Gamma}}_{\text{tangential}} - \underbrace{(\nabla\cdot\boldsymbol{\phi}_{\Gamma})(\boldsymbol{n}\cdot\boldsymbol{\psi}_{n})}_{\text{normal}} \Big). \tag{\ast}\label{eq:multi}$

The tag and a linkable equation reference, such as \eqref{eq:multi} can be set by adding these near the end of an equation.

\tag{tag_you_like}\label{label_you_like}


and then reference it using \eqref{} like we would use in a regular $\LaTeX$ document.

However, there are two caveats, in a multiline displaystyle, we want to use  delimiters instead of \$\$, the alignment toggle & is not applicable either, so we have to format the equation beautifully in the first place.

## Minimal Mistakes template

The template I am using is called Minimal mistakes, notice that the term “minimal” is different from “minimum”, while “minimum” indicates certain non-surpassable lowest limit, “minimal” is more metaphoric, and accords more with the minimalism in arts.

Minimal: characterized by the use of simple form or structures.

Tags:

Categories:

Updated: