Math Formulas

how to display beautiful math in a webpage

1. How to write and display mathematical formulas code editors?

2. How to write and display a column vector on my github.io?

2.1) Add the following code to

  • If you use Jekyll => Open _includes/mathjax.html
  • If you use Hugo => Open themes/layouts/partials/mathjax.html 
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>
<script
  type="text/javascript"
  charset="utf-8"
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
>
</script>
<script
  type="text/javascript"
  charset="utf-8"
  src="https://vincenttam.github.io/javascripts/MathJaxLocal.js"
>
</script>

2.2) Add the following line in the html layouts where I want to add formulas

  • If you use Jekyll => Open _layouts/post.html or _layouts/page.html => Add
 {% include mathjax.html %}
  • If you use Hugo => Open themes/layouts/partials/head.html => Add the below line before{{end}}
 {{ partial "mathjax_support.html" . }}

2.3) Test: Write a column vector in the new page(e.g. rendering.md)

github io Atom/VSCode I choose
$\begin{bmatrix}1 \\2 \end{bmatrix}$ good bad yes
$\begin{bmatrix}1 \2 \end{bmatrix}$ bad good no
$\begin{bmatrix}1 \2 \end{bmatrix}$ bad bad no

Reference

3. How to write mathematic formulas in Markdown/Latex?

Category Symbol $input$
Greek Letters
$\alpha, A$ \alpha, A
$\beta, B$ \beta, B
$\gamma$, $\Gamma$ \gamma, \Gamma
$\lambda$, $\Lambda$ \lambda,\Lambda
$\omega, \Omega$ \omega, \Omega
$\epsilon$, $\varepsilon$ \epsilon, varepsilon
$\pi$, $\Pi$ \pi, \Pi
$\phi$, $\Phi$, $\varphi$ \phi, \Phi, \varphi
$\sigma$, $\Sigma$ \sigma, \Sigma
$\theta$, $\vartheta$, $\Theta$ \theta, \vartheta \Theta
$\mu$, $M$ \mu, M
$\nu$, $N$ \nu N
$\delta$, $\Delta$ \delta, \Delta
$\nabla$, $\triangledown$, $\triangle$, \nabla, \triangledown, \triangle
Format
1) blackboard bold $\Bbb {AI}$ \Bbb {AI}
2) boldface $\mathbf {AI}$ \mathbf {AI}
3) calligraphic $\mathcal {AI}$ \mathcal {AI}
4) insert a thin space $x,y$, $xy$ x,y, xy
5) devider (e.g. set comprehension) $x\mid x^2$ x\mid x^2
6) symbol $\star \ast \oplus \circ \bullet$ \star \ast \oplus \circ \bullet
Operators
$\cos$ \cos
$\sin$ \sin
$\lim_{x\to c}$ \lim_{x\to c}
$\exp$ \exp
$\to$ \to
$\infty$ \infty
$\ne$ \ne
$\ge \circ \le$ \ge \le
$\sim$ \sim
$\approx$ \approx
$\equiv$ \equiv
$\bmod$ \bmod
$\times$ , $\pm$ \times, \pm
Power and Indices
$k_{n+1}$ k_{n+1}
$n^2$ n^2
$n^{-2}$ n^{-2}
$k_n^2$ k_n^2
Fractions and Binomials
$\frac{n!}{k!(n-k)!}$ \frac{n!}{k!(n-k)!}
$\binom{n}{k}$ \binom{n}{k}
$\frac{\frac{x}{1}}{x - y}$ \frac{\frac{x}{1}}{x - y}
$^3/_7$ ^3/_7
Roots
$\sqrt{k}$ \sqrt{k}
$\sqrt[n]{k}$ \sqrt[n]{k}
Sums and Integrals
$\sum_{i=1}^{10} t_i$ \sum_{i=1}^{10} t_i
$\int_0^\infty \mathrm{e}^{-x},\mathrm{d}x$ \int_0^\infty \mathrm{e}^{-x},\mathrm{d}x
$\sum$ \sum
$\prod$ \prod
$\coprod$ \coprod
$\in$ \in
$\notin$ \notin
$\varnothing$ \varnothing
$\bigoplus$ \bigoplus
$\bigotimes$ \bigotimes
$\bigodot$ \bigodot
$\bigcup$ \bigcup
$\bigcap$ \bigcap
$\biguplus$ \biguplus
$\bigsqcup$ \bigsqcup
$\bigvee$ \bigvee
$\bigwedge$ \bigwedge
$\int$ \int
$\oint$ \oint
$\iint$ \iint
$\iiint$ \iiint
$\idotsint$ \idotsint
$\sum_{\substack{0<i<m, 0<j<n}} P(i, j)$ \sum_{\substack{0<i<m, 0<j<n}} P(i, j)
$\int\limits_a^b$ \int\limits_a^b
$a’$ $a^{\prime}$ a’ a^{\prime}
$a’’$ a’’
$\hat{a}$ \hat{a}
$\bar{a}$ \bar{a}
$\grave{a}$ \grave{a}
$\acute{a}$ \acute{a}
$\dot{a}$ \dot{a}
$\ddot{a}$ \ddot{a}
$\not{a}$ \not{a}
$\mathring{a}$ \mathring{a}
${A}\rightarrow{B} $ {A}\rightarrow{B}
${A}\leftarrow{B}$ {A}\leftarrow{B}
$\overrightarrow{AB}$ \overrightarrow{AB}
$\overleftarrow{AB}$ \overleftarrow{AB}
$a’’’$ a’’’
$\overline{aaa}$ \overline{aaa}
$\check{a}$ \check{a}
$\vec{a}$ \vec{a}
$\underline{a}$ \underline{a}
$\color{red}x\color{blue}y\color{orange}z$ \color{red}x\color{blue}y\color{orange}z
$\pm$ \pm
$\mp$ \mp
$\int y \mathrm{d}x$ \int y \mathrm{d}x
$,$ ,
$:$ :
$;$ ;
$!$ !
$\int y, \mathrm{d}x$ \int y, \mathrm{d}x
$\dots$ \dots
$\ldots$ \ldots
$\cdot$ \cdot
$\cdots$ \cdots
$\vdots$ \vdots
$\ddots$ \ddots
Brackets
$(\overbrace{…+r_{t-1}}^{\require{cancel}\bcancel{R^{\rm past}_t}} + \overbrace{r_{t}+…}^{R^{\rm future}_t})$ (\overbrace{…+r_{t-1}}^{\require{cancel}\bcancel{R^{\rm past}_t}} + \overbrace{r_{t}+…}^{R^{\rm future}_t})
$\Biggl(\biggl(\Bigl(\bigl((a)\bigr)\Bigr)\biggr)\Biggr)$ \Biggl(\biggl(\Bigl(\bigl((a)\bigr)\Bigr)\biggr)\Biggr)
$[a]$ [a]
${a}$ {a}
$\lvert f\rvert$ \lvert f\rvert
$\langle f \rangle$ \langle f \rangle
$\lfloor f \rfloor$ \lfloor f \rfloor
$\lceil f \rceil$ \lceil f \rceil
$\ulcorner f \urcorner$ \ulcorner f \urcorner
Matrices
$\begin{bmatrix}0&1 \\1&0 \end{bmatrix}$
Arrays
$\begin{array}{|cc|} a&b\\c&d\end{array}$
$\frac { \begin{array}{|cc|} e&b\\f&d\end{array} } { {\begin{array}{|cc|} a&b\\c&d\end{array} } }$

References