Menulis Rumus Matematika di Blog

2021-08-23 2026-08-08 702 kata 4 menit

Cara menulis rumus matematika di blog menggunakan LaTeX, Menulis simbol dan notasi matematika menggunakan LaTeX di CodeGogs, script MathJax dan KaTeX

Daftar Isi

Pengantar

Blog atau website bertema pendidikan seperti matematika dan akuntansi hampir selalu membutuhkan simbol, notasi, rumus, dan persamaan. Masalahnya, Blogger secara bawaan tidak menyediakan editor rumus seperti yang tersedia di Microsoft Word.

Karena itu, penulisan rumus matematika di blog biasanya dilakukan dengan kode $\LaTeX$ , lalu dirender oleh pustaka JavaScript seperti MathJax atau KaTeX.

[

](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXhXh-29qqCCQvxftZ0xkRT7jAJsZE-X4IiAoC3Sry_JeDe-LX6VTDExozqLFCkHhix4xu8MuSEmCiQO4f8A7o4aMUzjy-l_cAyk-b1dh_kJHNCoQeWnoS_0OUWmkLl-rstyFoJ-pqaE/s2048/20210823_153204.jpg)

Daripada memasukkan rumus sebagai gambar hasil screenshot, menulisnya langsung dengan $\LaTeX$ akan memberi hasil yang lebih rapi, lebih ringan, dan lebih sesuai dengan kaidah penulisan matematika.

Langkah Umum Menulis Rumus Matematika di Blog

Secara sederhana, prosesnya terdiri dari tiga tahap:

menulis kode rumus dalam format $\LaTeX$ ,
menempelkan kode itu ke artikel blog,
merendernya dengan MathJax atau KaTeX.

Menulis Kode LaTeX

Jika belum terbiasa mengetik kode $\LaTeX$ langsung, Anda bisa memakai CodeCogs sebagai alat bantu. Tampilannya mirip editor persamaan dan dapat membantu menghasilkan kode rumus yang siap disalin.

CodeCogs biasanya memiliki tiga bagian utama:

toolbar simbol,
kotak input kode $\LaTeX$ ,
kotak output atau pratinjau rumus.

Contoh:

\frac{x^2+1}{x-3}

Hasilnya:

\frac{x^2+1}{x-3}

Jika menyalin dari CodeCogs, lebih baik ambil kode $\LaTeX$ mentah, bukan hasil gambar. Lalu tempelkan ke artikel blog dalam mode HTML atau mode penulisan yang tidak mengubah karakter backslash.

Contoh Penulisan Kode LaTeX

Berikut beberapa contoh dasar yang sering dipakai.

Operasi Hitung

Kode $\LaTeX$	Hasil
`a+b`	$a+b$
`c-d`	$c-d$
`a\times b`	$a\times b$
`c\div d`	$c\div d$

Perpangkatan dan Indeks

Gunakan ^ untuk pangkat dan _ untuk indeks. Jika pangkat atau indeks lebih dari satu karakter, gunakan kurung kurawal.

Kode $\LaTeX$	Hasil
`a^b`	$a^b$
`a^{bc}`	$a^{bc}$
`4x_a`	$4x_a$
`x_{max}^2+x_{min}^2=1`	$x_{max}^2+x_{min}^2=1$

Pecahan

Gunakan \frac untuk pecahan biasa dan \dfrac untuk tampilan yang lebih besar.

Kode $\LaTeX$	Hasil
`\frac{a}{b}`	$\frac{a}{b}$
`\dfrac{c}{d}`	$\dfrac{c}{d}$
`\frac{x-x_1^2}{a^2}`	$\frac{x-x_1^2}{a^2}$
`F=k\dfrac{Q_1Q_2}{R^2}`	$F=k\dfrac{Q_1Q_2}{R^2}$

Integral

Kode $\LaTeX$	Hasil
`y=\int (x+1)\ dx`	$y=\int (x+1)\ dx$
`y=\int_{0}^{\infty} f(x)\ dx`	$y=\int_{0}^{\infty} f(x)\ dx$
`\iint f(x,y)\ dx\ dy`	$\iint f(x,y)\ dx\ dy$
`\oint`	$\oint$

Diferensial dan Turunan

Kode $\LaTeX$	Hasil
`\dfrac{dy}{dx}`	$\dfrac{dy}{dx}$
`\dfrac{\partial z}{\partial x}`	$\dfrac{\partial z}{\partial x}$

Akar dan Pertidaksamaan

Kode $\LaTeX$	Hasil
`\sqrt{a}`	$\sqrt{a}$
`\sqrt[n]{a}`	$\sqrt[n]{a}$
`y=\sqrt{\dfrac{x}{x^2+2x+1}}`	$y=\sqrt{\dfrac{x}{x^2+2x+1}}$
`a < b`	$a < b$
`a \le b`	$a \le b$
`a > b`	$a > b$
`a \ge b`	$a \ge b$

Sigma dan Pi

Kode $\LaTeX$	Hasil
`\sum_{i=1}^{n} x_i`	$\sum_{i=1}^{n} x_i$
`\sum \limits_{i=1}^{n} x_i`	$\sum \limits_{i=1}^{n} x_i$
`\prod_{i=1}^{n} x_i`	$\prod_{i=1}^{n} x_i$
`\prod\limits_{i=1}^{n} x_i`	$\prod\limits_{i=1}^{n} x_i$

Trigonometri

Kode $\LaTeX$	Hasil
`\sin(x)`	$\sin(x)$
`\cos(x)`	$\cos(x)$
`\tan(x)`	$\tan(x)$
`\alpha^\circ`	$\alpha^\circ$

Matriks

Contoh penulisan matriks:

\begin{bmatrix}
a & b \\
c & d
\end{bmatrix}

Hasil:

\begin{bmatrix} a & b \\ c & d \end{bmatrix}

Persamaan Sejajar

Untuk beberapa baris persamaan, lingkungan align sangat berguna.

\begin{align}
y &= 2x+3 \\
y-3 &= 2x
\end{align}

Hasil:

\begin{align} y &= 2x+3 \\ y-3 &= 2x \end{align}

Merender Rumus dengan MathJax

Jika blog Anda belum memiliki renderer rumus, salah satu pilihan paling umum adalah MathJax. Potongan berikut adalah contoh script yang dulu sering dipasang di Blogger.

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [['$','$'], ['\\(','\\)']],
      displayMath: [['$$','$$'], ['\\[','\\]']]
    }
  });
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@2/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

Untuk penulisan:

rumus inline bisa diapit dengan $ ... $ atau $ ... $,
rumus display bisa diapit dengan $$ ... $$ atau \[ ... \].

Merender Rumus dengan KaTeX

KaTeX umumnya lebih ringan dan cepat. Contoh pemasangannya:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    renderMathInElement(document.body, {
      delimiters: [
        {left: "$$", right: "$$", display: true},
        {left: "$", right: "$", display: false},
        {left: "\\(", right: "\\)", display: false},
        {left: "\\[", right: "\\]", display: true}
      ]
    });
  });
</script>

MathJax atau KaTeX?

Secara umum:

MathJax lebih fleksibel dan kompatibel untuk banyak fitur,
KaTeX lebih cepat dan ringan,
untuk blog pendidikan biasa, keduanya sama-sama layak dipakai.

Tips Praktis

Beberapa hal yang sebaiknya diperhatikan:

gunakan kode $\LaTeX$ asli, bukan screenshot rumus,
uji rumus di artikel draft sebelum dipublikasikan,
konsisten memakai delimiter inline dan display,
hindari menaruh script renderer berulang kali di dalam isi artikel,
jika blog sudah memasang MathJax atau KaTeX di template, artikel cukup berisi kode rumusnya saja.

Penutup

Menulis rumus matematika di blog pada dasarnya tidak sulit jika alurnya jelas: tulis kode $\LaTeX$ , tempelkan ke artikel, lalu render dengan MathJax atau KaTeX. Dengan cara ini, tampilan rumus akan jauh lebih rapi daripada memakai gambar, dan artikel matematika menjadi lebih nyaman dibaca.