Introduction
In this second part of the multi-part tutorial I will be walking you through setting up two important customisation needed to write a engineering technical blog namely
- How to write maths
- How to format the text to justify
How to write maths equations
If you are familiar with Latex, then this is very easy to do in jekyll. In order to write maths equations chirpy jekyll documentation recommends using the ‘math: true’ in the post front matter. This I found works ok but equation numbering didn’t work well. So instead I recommend adding the following lines to the _includes\head.html instead just before the <\head> tag at the end of the file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
<script>
window.MathJax = {
tex: {
tags: 'ams'
},
svg: {
fontCache: 'global'
}
};
</script>
You can now test whether math is working or not by adding the following latex code in your post.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$$
\begin {equation} \label{diffint}
\frac{\mathrm{d}}{\mathrm{d} x} \int e^{x}\,dx = e^{x}
\end{equation}
$$
$$ \begin{equation*}
E = mc^2
\end{equation*} $$
$$
\begin{align}
i\hbar \frac{\partial}{\partial t} \psi(\mathbf{r}, t) &= {\cal H}(\mathbf{r};t)\psi(\mathbf{r}, t) = [\hat{T} + \hat{V}]\,\psi(\mathbf{r}, t) \label{classicalmotion1}\\
&=\left[ -\frac{\hbar^2}{2m}\nabla^2 + \hat{V}(\mathbf{r}) \right]\psi(\mathbf{r}, t) \label{classicalmotion2}\\
\end{align}
$$
It should look like the following:
\[\begin {equation} \label{diffint} \frac{\mathrm{d}}{\mathrm{d} x} \int e^{x}\,dx = e^{x} \end{equation}\] \[\begin{equation*} E = mc^2 \end{equation*}\] \[\begin{align} i\hbar \frac{\partial}{\partial t} \psi(\mathbf{r}, t) &= {\cal H}(\mathbf{r};t)\psi(\mathbf{r}, t) = [\hat{T} + \hat{V}]\,\psi(\mathbf{r}, t) \label{classicalmotion1}\\ &=\left[ -\frac{\hbar^2}{2m}\nabla^2 + \hat{V}(\mathbf{r}) \right]\psi(\mathbf{r}, t) \label{classicalmotion2}\\ \end{align}\]Text justification
Justified text looks great in technical reports and papers so why not have justified text in your blog. This is relatively very easy. Add the following line in ‘/assets/css/style.scss’ file at the end. 1 2.
1
.post-content { text-align: justify; }