Ada dua Javascript untuk mengolah formula matematika yang populer, MathJax dan KaTeX. Kedua modul ini juga ditulis dengan cara/format yang sama, yaitu Tex Mathematical Expression.
Khusus untuk Hugo, cara terbaik menurut penulis untuk implementasi Math Typesetting dengan menggunakan MathJax. Kenapa? Karena untuk saat ini (saat artikel dibuat), KaTeX hanya dapat dijalankan di markup Blackfriday di Hugo dengan content format .mmark
atau dengan set mmark = true
pada Front Matter.
Sedangkan dari versi Hugo 0.60.0 ke atas markup
default dari Hugo sudah menjadi Goldmark dan pengembang Hugo mengatakan bahwa mmark
fitur udah depreciated1 dan akan dihapus pada versi Hugo selanjutnya2.
Karena kita orangnya edgy (ya gak?) kita ikutin aja sesuai “Aturan” baru, Yaitu pake MathJax.
Untuk memasang MathJax kita harus meletakan javascript MathJax dibawah ini di dalam tag <head>
.
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Agar penggunaan lebih maksimal, ada bagusnya untuk menggunakan tag conditional, agar Javascript hanya di-load saat MathJax dibutuhkan halaman.
Sehingga seperti berikut.
{{ if or .Page.Params.math .Site.Params.math }}
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
{{ end }}
Lalu jika halaman membutuhkan MathJax, tinggal beri parameter math: true
(yaml) pada Front Matter.
Contoh cara penulisan seperti berikut.
$$\bigg({1\over2}+{1\over2}\bigg)\times 2^2 = 4$$
Hasilnya:
$$ \bigg({1\over2}+{1\over2}\bigg)\times 2^2 = 4$$
Jadi untuk penulisan ekspresi matematikanya harus diantara $$
. Dan untuk formula dan notasi matematika lainnya bisa dilihat di dokumentasi/tutorial yang terkait Tex atau LaTex Mathematical Expression, banyak kok internet .
Selain support penulisan Tex — juga support AsciiMath3 dan MathML4.
Sekian, semoga bermanfaat.