Menulis Formula Matematika Blogdown Hugo
Lama rasanya tidak menulis di blog ini, pada kesempatan kali ini saya mau berbagi bagaimana menulis formula matematika dan membuat diagram di Blogdown Hugo.
Pasti kalian pernah menemui sebuah blog yang berisi formula matematika, kebanyakan memakai gambar hasil screenshot. Atau malah kadang ada yang menulis seperti ini: 5x^3 + 4x^2 - 2x + 1 4 x 5 : 20 = 1
Nah, pasti sedikit menyebalkan bila ditulis seperti itu atau memakai gambar. Untuk kalian penulis blog yang bertema Science terutama matematika ada baiknya kalian menggunakan MathJax atau Katex untuk membuat formula matematika.
MathJax
MathJax adalah salah satu proyek Open Source untuk menulis formula matematika pada sebuah blog yang menggunakan Java Script. Penggunaan MathJax cukup mudah sekali, karena penulisan formula bisa menggunakan notasi TeX, LaTeX, MathML, atau bisa menggunakan AsciiMath.
KaTeX
Selain MathJax ada cara lain menulis formula matematika di blog dengan KaTeX, KaTeX juga seperti MathJax yang merupakan proyek Open Source yang menggunakan Java Script untuk menulis formula matematika di blog. Tetapi, ada beberapa paket LaTeX dan fungsi LaTeX tidak bisa dirender oleh KaTeX. Pada blog ini, saya menggunakan KaTeX untuk menulis formula matematika. Jika tertarik memasangnya silahkan baca lanjutan tulisan ini. Jika tidak tertarik, harus baca juga sampai selesai :smile.
Menambahkan KaTeX pada Blogdown
Untuk menambah KaTeX pada Blogdown Hugo cukup mudah, hanya perlu 3 langkah saja. Yaitu:
- Membuat file baru dengan nama
math.htmlpada folder/layouts/partials, lalu isi file tersebut dengan kode berikut:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
onload="renderMathInElement(document.body);"></script>Buka file
header.htmlpada folder/layouts/partials, tambahkan kode berikut:{{ if or .Params.math .Site.Params.math }} {{ partial "math.html" . }} {{ end }}Terakhir, tambahkan kode dibawah pada front matter file konten yang dibuat:
markup: "mmark" math: true
Sekarang untuk mengujinya dengan tulisan berikut:
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$
$$
\int_{a}^{b} x^2 dx
$$
$$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }
\newline
$$
$$
=\displaystyle \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
\newline
$$
$$
\alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi
$$
$$
\int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx
$$
$$
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}
$$Maka hasilnya seperti ini:
\[ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } \]
\[ \int_{a}^{b} x^2 dx \]
\[\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } \newline \]
\[ =\displaystyle \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \newline \]
\[ \alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi \]
\[ \int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx \]
\[ f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x} \]
Mudah bukan? jadi seperti itu menulis formula matematika di blogdown hugo. Bisa menggunakan MathJax ataupun KaTeX. Semoga bermanfaat dan terima kasih sudah membaca, sampai ketemu di postingan selanjutnya.
Referensi: