# Finally switched to Jekyll with Mathjax!

I finally decided to migrate various of my old writing in my faculty website at UC Irvine locally to `Jekyll`

. Apparently it 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.

```
def backprop(W,b,X,y):
'''
W: weight, b: bias
X: features, y: target
Step 1: forward pass
Step 2: backprop
'''
N = X.shape[0]
# layer 1 = input layer
a1 = X
# layer 1 (input layer) -> layer 2 (hidden layer)
z2 = np.matmul(X, W[0]) + b[0]
# layer 2 activation
a2 = relu(z2)
# layer 2 (hidden layer) -> layer 3 (output layer)
z3 = np.matmul(a2, W[1]) + b[1]
# output layer activation
output = z3
# layer 3's derivative
delta3 = -(y - output)
# layer 2's derivative
delta2 = np.matmul(delta3, W[1].T)*relu_prime(z2)
# no derivative for layer 1
dW = [np.matmul(a1.T,delta2)/N + eps*W[0], np.matmul(a2.T,delta3)/N + eps*W[1]]
db = [np.mean(delta2, axis=0), np.mean(delta3, axis=0)]
# dW[0] is W[0]'s derivative, and dW[1] is W[1]'s derivative; similar for db
return dW, db
```

### Mathjax with LaTeX

The following instruction follows a post at Brendan A R Sechter’s Development Blog with some simplifications if you are a mathematician and want to add `MathJax`

to every post semi-default. First you need to add a renderer in certain style file in `_layout`

, by adding the following code block to `default.html`

; Alternatively if you are using Minimal Mistakes template, you 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 you 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 you can write some famous formulae like:
\(E = mc^2,\)
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).\)
However, there are two caveats, in a multiline `displaystyle`

, you want to use `$$ $$`

delimiters instead of `\\[ \\]`

, the alignment toggle `&`

is not applicable either, so you have to format the equation beautifully in the first place.

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.

## Comments