Pengantar
Cara Menulis Rumus Matematika di Blog
Ada beberapa langkah yang harus dilakukan untuk menuliskan rumus matematika di blog, yaitu:
1. Menuliskan Kode $\LaTeX$
Langkah pertama yang harus dilakukan tentu saja adalah menuliskan rumus matematikanya. Jika kita menulis rumus matematika di blog, kita membutuhkan suatu kode atau perintah, yaitu **kode $\LaTeX$**.
Kode $\LaTeX$ yang dimaksudkan di sini adalah sebuah penulisan simbol, notasi, rumus, ataupun persamaan yang nantinya akan dimasukkan ke dalam blog dan akan **dirender** oleh sebuah 'mesin' JavaScript, sehingga kode tersebut menjadi sebuah rumus seperti yang diinginkan.
Bagi yang belum familiar dengan kode $\LaTeX$, kita bisa memanfaatkan sebuah *tools* *online* seperti CodeCogs untuk menghasilkan kode secara visual.
Tools ini dari segi tampilan mirip dengan equation editor yang ada di Microsoft Word. Di sini kita hanya mengklik simbol atau rumus yang diinginkan, selanjutnya akan muncul kode $\LaTeX$ yang natinya akan dimasukkan/dicopy ke dalam blog. Di bawah ini adalah tampilan dari CodeGogs.Kode LaTeX:
Kode LaTeX berupa image:
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
| 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^2_{min}=1$ |
Pecahan
| 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{Q1\ Q2}{R^2} | $F=k\dfrac{Q1\ Q2}{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 atau Turunan
| Kode $\LaTeX$ | Hasil |
|---|---|
| \dfrac{dy}{dx} | $\dfrac{dy}{dx}$ |
| \dfrac{\partial z}{\partial x} | $\dfrac{\partial z}{\partial x}$ |
Akar, Tanda Lebih Besar, dan Tanda Lebih Kecil
\sqrt[n]{arg} . Opsi n menyatakan akar pangkat n. Perhatikan contoh berikut.| 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+1}}$ |
| a < b | $a < b$ |
| a \le b | $a \le b$ |
| a > b | $a > b$ |
| a \ge b | $a \ge b$ |
Catatan :
Untuk tanda kurang dari, tidak bisa langsung dituliskan di dalam blog, harus diparse terlebih dahulu.
Sigma dan Pi
Sigma dengan simbol $\sum$ merupakan bentuk pendek dari penjumlahan panjang, sedangkan notasi $\Pi$ digunakan untuk menyingkat perkalian.| 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\limits _ {i=1}^{n}{x_i} | $\prod\limits _ {i=1}^{n}{x_i}$ |
| \prod_{i=1}^{n}{x_i} | \[\prod_{i=1}^{n}{x_i}\] |
Catatan :
Pada baris pertama tanda di atas dan di bawah $\sum$ tidak persis di atas dan di bawah, tapi agak menyerong. Baris keempat kode LaTeX tersebut di apit oleh kurung siku.
Trigonometri
| Kode $\LaTeX$ | Hasil |
|---|---|
| \sin (x) | $\sin (x)$ |
| \cos (x) | $\cos (x)$ |
| \tan (x) | $\tan (x)$ |
| \alpha^\circ | $\alpha^\circ$ |
| \sin^2(A)+\cos^2(A)=1 | $\sin^2(A)+\cos^2(A)=1$ |
Selain itu untuk komplemenya adalah cosec, sec, dan cotan untuk cosecant, secant, dan cotangent.
Geometri
| Kode $\LaTeX$ | Hasil |
|---|---|
| \overline{AB} | $\overline{AB}$ |
| \overrightarrow{AB} | $\overrightarrow{AB}$ |
| \angle{ABC} | $\angle{ABC}$ |
| \measuredangle{ABC} | $\measuredangle{ABC}$ |
| \triangle {ABC} | $\triangle {ABC}$ |
| a\parallel b | $a\parallel b$ |
| a\perp b | $a\perp b$ |
Huruf Yunani
| Kode $\LaTeX$ | Hasil |
|---|---|
| \alpha A | $\alpha A$ |
| \beta B | $\beta B$ |
| \gamma \Gamma | $\gamma \Gamma$ |
| \delta \Delta | $\delta \Delta$ |
| \epsilon \varepsilon E | $\epsilon \varepsilon E$ |
| \zeta Z | $\zeta Z$ |
| \eta H | $\eta H$ |
| \theta \vartheta \Theta | $\theta \vartheta \Theta$ |
| \iota I | $\iota I$ |
| \eta H | $\eta H$ |
| \kappa K | $\kappa K$ |
| \lambda \Lambda | $\lambda \Lambda$ |
| \mu M | $\mu M$ |
| \nu N | $\nu N$ |
| \xi \Xi | $\xi \Xi$ |
| o O | $o O$ |
| \pi \Pi | $\pi \Pi$ |
| \rho \varrho P | $\rho \varrho P$ |
| \sigma \Sigma | $\eta H$ |
| \tau T | $\tau T$ |
| \upsilon \Upsilon | $\upsilon \Upsilon$ |
| \phi \varphi \Phi | $\phi \varphi \Phi$ |
| \chi X | $\chi X$ |
| \psi \Psi | $\psi \Psi$ |
| \omega \Omega | $\omega \Omega$ |
Titik Tiga
| Kode $\LaTeX$ | Hasil |
|---|---|
| \cdots | $\cdots$ |
| \vdots | $\vdots$ |
| \ddots | $\ddots$ |
| 1\ldots 10 | $1\ldots 10$ |
Matriks
| Kode $\LaTeX$ | Hasil |
|---|---|
| \begin{pmatrix}a&b&c\\d&e&f\end{pmatrix} | $\begin{pmatrix}a&b&c\\d&e&f\end{pmatrix}$ |
| \begin{bmatrix}a&b&c\\d&e&f\end{bmatrix} | $\begin{bmatrix}a&b&c\\d&e&f\end{bmatrix}$ |
| \det(\mathbf{A})=\begin{vmatrix}a&b\\c&d\end{vmatrix} | $\det(\mathbf{A})=\begin{vmatrix}a&b\\c&d\end{vmatrix}$ |
Limit
| Kode $\LaTeX$ | Hasil |
|---|---|
| \lim_{x \to 0} \frac {x} {x^2} | \[\lim_{x \to 0} \frac {x} {x^2}\] |
| \lim_{x \to \infty} \frac {x} {sin(x)} | \[\lim_{x \to \infty} \frac {x} {sin(x)}\] |
Logaritma
| Kode $\LaTeX$ | Hasil |
|---|---|
| ^a\log x^b | $^a\log x^b$ |
Sebenarnya ada kode untuk menuliskan logaritma agar terlihat lebih rapi, tetapi harus dituliskan langsung di $\LaTeX$ menggunakan usepackage xparse dan makro tertentu. Hal ini tidk bisa dilakukan di blog.
Nilai Mutlak dan Norma
| Kode $\LaTeX$ | Hasil |
|---|---|
| y=\left|x-2 \right| | $y=\left|x-2 \right|$ |
| \left \Vert x \right\Vert_a=\sqrt{\sum \limits_{i=1}^{n} {x_i^2}} | $\left \Vert x \right\Vert_a=\sqrt{\sum \limits_{i=1}^{n} {x_i^2}}$ |
Persamaan Bercabang
| Kode $\LaTeX$ | Hasil |
|---|---|
| \left \vert x \right \vert= \begin {cases} x& \text{untuk}\ x\ \ge 0\\ -x & \text{untuk}\ x\ <0 \end{cases} | $\left \vert x \right \vert= \begin {cases} x& \text{untuk}\ x \ge 0\\ -x & \text{untuk}\ x <0 \end{cases}$ |
Variabel Bertopi
| Kode $\LaTeX$ | Hasil |
|---|---|
| \bar {x} | $\bar {x}$ |
| \hat {x} | $\hat {x}$ |
| y=\tilde {x} | $\tilde {x}$ |
Persamaan Berlanjut
\begin{align} y&=(x+a)(x-a)\\ &=x^2-ax+ax-a^2\\ &=x^2-a^2 \end{align}
\begin{array}{rcl} x^2-6x& = &-8 \\
x^2-6x+9& = & -8+9\\
(x-3)^2 &= &1\\
x-3& = & \pm\sqrt{1}\\
x-3&=&\pm 1\\
x-3&=&1\ \text{atau}\x-3=-1\\
x&=&4\ \text{atau}\ x=2 \end{array}
Persamaan di atas terdiri dari tiga bagian, ruas kiri, tanda sama dengan, dan ruas kanan. Kode rcl digunakan untuk menempatkan persamaan tersebut, apakah akan rata kanan (right), rata tengah (center), atapu rata kiri (left).
ditampilkan oleh website/blog.
Memasang JavaScript
Setelah kita menuliskan kode $\LaTeX$ dari simbol ataupun persamaan matematika yang diinginkan, maka langkah selanjutnya adalah memasang 'mesin' JavaScript di blog.
Jika kita menggunakan blog dengan platform Blogspot, kita bisa menggunakan script dari MathJax dan $$\KaTeX$$ dan menempatkannya di blog kita.
MathJax
MathJax merupakan library Javascript untuk menampilkan (display engine) notasi rumus matematika dalam $\LaTeX$, MathML, dan AsciiMath.
Cara Pemasangan MathJax
Jika Anda ingin menggunakan script dari MathJax, ikuti langkah-langkah berikut:
- Buka **Dashboard Blog** Anda.
- Pilih **Tema** (Theme).
- Klik **Edit HTML**.
- Salin script berikut dan letakkan di atas tag penutup
</head>:
<script>
window.MathJax = {
// 1. Konfigurasi Input TeX (untuk mengenali rumus)
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']], // Delimiter untuk rumus inline
displayMath: [['$$', '$$'], ['\\[', '\\]']], // Delimiter untuk rumus blok
// Memuat ekstensi AMS (untuk simbol dan lingkungan lanjutan)
packages: {'[+]': ['ams']}
},
// 2. Konfigurasi Output (CHTML direkomendasikan untuk kecepatan)
options: {
renderActions: {
// Mengaktifkan pemrosesan MathML dan AsciiMath jika diperlukan
add: [200, ['Typeset', 10, function (doc) {
for (const node of doc.querySelectorAll('script[type^="math/"]')) {
doc.options.MathJax.convert(node);
}
}, function (doc) { return doc.typesetRoots; }]]
},
ignoreHtmlClass: 'tex2jax_ignore', // Kelas yang diabaikan MathJax
processHtmlClass: 'tex2jax_process' // Kelas yang diproses MathJax
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>Catatan: Pastikan Anda mengganti entitas HTML seperti " dan ' dalam konfigurasi MathJax menjadi karakter kutipan yang sebenarnya (" dan ') saat menempatkannya di editor HTML Blogspot. Kode di atas sudah diperbaiki.
Klik **Simpan/Save** pada tema blog Anda.
Opsi Pemasangan di Blogspot (Menggunakan Widget)
Anda juga bisa menempatkan kode melalui **Widget/Gadget** dengan langkah-langkah berikut:
- Masuk **Dashboard Blog**.
- Pilih **Tata Letak** (Layout).
- Pilih lokasi Widget/Gadget.
- Klik **Tambahkan Gadget/Widget**.
- Pilih **HTML/Javascript**.
- Kosongkan **Judul**.
- Salin kode tersebut ke dalam kolom konten.
- Klik **Simpan/Save**.
Pemasangan untuk WordPress
Bagi Anda yang menggunakan WordPress, metode yang disarankan adalah menggunakan **Plugin**:
- WP Quick LaTeX
- Simple Mathjax
- Atau plugin sejenis lainnya.
Metode Manual (Tidak Disarankan)
Anda juga bisa menempatkan *script* MathJax secara manual di file tema Anda (Pengaturan >> Penyunting Tema >> header.php). Letakkan kode **di atas tag penutup** </body>.
⚠️ **Perhatian:** Jika Anda *update* atau ganti tema WordPress, *script* ini akan terhapus.
Skrip MathJax untuk WordPress
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\(','\)']],
displayMath: [['\\[','\\]'], ['$$','$$']]
}
});
</script>
<script type="text/javascript"
src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>Salah satu ciri dari blog yang menggunakan script MathJax adalah munculnya karakter seperti **$**, **%**, **/**, **\***, saat kita membuka blog tersebut (jika rendering gagal).
Pemasangan $\KaTeX$
Bagi Anda yang akan menggunakan script dari $$\KaTeX$$, silakan salin script berikut dan tempatkan **di atas tag penutup** </head>.
Skrip $\KaTeX$ Lengkap (Siap Copy-Paste)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous">
<!-- Memuat KaTeX JavaScript Inti (defer untuk rendering cepat) -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js" integrity="sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8" crossorigin="anonymous"></script>
<!-- Memuat ekstensi auto-render (Wajib untuk menampilkan rumus dalam teks) -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
onload="renderMathInElement(document.body, {delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\(', right: '\\)', display: false}, {left: '\\[', right: '\\]', display: true} ]});"></script>Pemasangan $\KaTeX$
Bagi Anda yang akan menggunakan *script* dari $$\KaTeX$$, silakan salin skrip berikut dan tempatkan **di atas tag penutup** </head>.
Skrip $\KaTeX$ Lengkap (Siap Copy-Paste)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous">
<!-- Memuat KaTeX JavaScript Inti (defer untuk rendering cepat) -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js" integrity="sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8" crossorigin="anonymous"></script>
<!-- Memuat ekstensi auto-render (Wajib untuk menampilkan rumus dalam teks) -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/contrib/auto-render.min.js" integrity="sha384-vZTG03m+2yp6N6BNi5iM4rW4oIwk5DfcNdFfxkk9ZWpDriOkXX8voJBFrAO7MpVl" crossorigin="anonymous"
onload="renderMathInElement(document.body, {delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\(', right: '\\)', display: false}, {left: '\\[', right: '\\]', display: true} ]});"></script>Cara menempatkannya sama seperti memasang *script* MathJax di atas (melalui Edit HTML atau Widget/Gadget).
Perbandingan Kecepatan $\KaTeX$ vs. MathJax
Sebaiknya menggunakan *script* dari MathJax atau $\KaTeX$? Untuk perbandingan **kecepatan *loading*** dalam menampilkan kode $\LaTeX$, Anda dapat melihat perbandingannya di sini.
Menyisipkan Spasi pada Persamaan $\LaTeX$
Pada mode persamaan, baik dengan apitan dollar (`$`), kurung biasa (`\(`), kurung siku (`\[`), atau lingkungan (*environment*), $\LaTeX$ secara default **mengabaikan spasi**.
Sebagai contoh, kode y= mx + c dan y=mx+c akan menghasilkan tampilan yang sama, yaitu $y=mx+c$.
Cara Menambahkan Spasi
Jika kita ingin menambahkan spasi pada persamaan, kita dapat memberi kode/tanda agar $\LaTeX$ menyisipkan spasi kosong. Cara yang paling mudah adalah dengan memberi tanda **backslash diikuti spasi** (\ ).
Dengan demikian, jika kita menuliskan y\ =\ mx\ +\ c, akan menghasilkan $y\ =\ mx\ +\ c$.
Kode lain untuk menyisipkan spasi dapat dilihat pada tabel berikut.
| Kode $\LaTeX$ | Contoh | Hasil |
|---|---|---|
| \! | y\!= mx+c | $y\!= mx+c$ |
| \, | y\,= mx+c | $y\,= mx+c$ |
| \: | y\:= mx+c | $y\:= mx+c$ |
| \; | y\;= mx+c | $y\;= mx+c$ |
| \quad | y\quad= mx+c | $y\quad= mx+c$ |
| \qquad | y\qquad= mx+c | $y\qquad= mx+c$ |
Catatan :
Pada mode persamaan berlanjut, untuk memutus baris dan berpindah ke baris selanjutnya bisa menggunakan kode double backslash ( \\ ), dan untuk mengatur spasi vertikal antar baris bisa menggunakan kode kurung siku yang diisi angka spasi yang diinginkan, misalnya 12 maka kodenya [12pt]. Kode ini diletakkan setelah tanda double backslash.
Bentuk Sebaris, Bentuk Tayang, dan Mode Persamaan
Persamaan lingkaran dengan pusat di (0,0) serta jari-jari R adalah $x^2+y^2=R^2$,
sedangkan jika lingkaran berpusat di (p,q) maka persamaannya menjadi \[(x-p)^2+(y-q)=R^2\].
Persamaan parabola di sisi lain dinyatakan dengan persamaan :
\begin{equation}
x=ay^2+by+c
\end{equation}Catatan :
1. Jika ingin menuliskan rumus atau persamaan dalam satu baris gunakan dollar, apit rumus tersebut dengan $.
2. Cara lain menulis dalam bentuk sebaris adalah apit rumus tersebut dengan tanda \[ dan \]
3. Jika ingin menuliskan rumus dalam bentuk tayang/display, apit rumus tersebut dengan tanda backslash-kurung siku
4. Cara lain menulis dalam bentuk tayang/display adalah apit rumus dengan dollar ganda ($$)
5. Jika ingin memberi nomor persamaan, gunakan lingkungan equation atau align.
