Pengantar
Mengelola sebuah website atau blog dengan niche pendidikan misalnya matematika, dan akuntansi, tentu tidak bisa lepas dari notasi, simbol, rumus, ataupun persamaan matematika. Sayangnya secara default blogger tidak menyediakan fitur untuk menuliskan rumus-rumus ataupun persamaan matematika di dashboardnya. Berbeda halnya, ketika kita kita menulis di Microsoft Word, tersedia sebuah tools yaitu equation editor untuk menulis rumus dan persamaan matematika. Lalu, bagaimana caranya menulis rumus matematika di blog?
Ketika kita melihat website atau blog yang berisi tentang matematika, tidak jarang rumus atau persamaan matematika yang ditampilkan adalah sebuah gambar yang awalnya discreenshoot kemudian dimasukkan ke dalam blog. Tentu saja hasilnya tidak sebaik jika rumus atau persamaan tersebut ditulis secara langsung di blog. Untuk menulis rumus matematika di blog, kita membutuhkan suatu bahasa program yang dikenal dengan nama $\LaTeX$. Dengan $\LaTeX$, rumus-rumus atau persamaan matematika yang dituliskan di blog akan terlihat lebih rapi dan sesuai dengan kaidah penulisan matematika secara ilmiah. Untuk lebih mengenal tentang $\LaTeX$, Anda dapat mengunjungi situs langsung ke situs utamanya LateX Project.
Cara Menulis Rumus Matematika di Blog
Ada beberapa langkah yang harus dilakukan untuk menuliskan rumus matematika di blog yaitu :
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 di dalam $\LaTeX$ yang nantinya akan dimasukkan ke dalam blog dan 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 yaitu CodeCogs.
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:
Terlihat ada tiga bagian dari tampilan CodeGogs yaitu, simbol, kotak input, dan kotak output. Untuk mencobanya silakan klik pada simbol yang diinginkan, pilih jenis huruf, ukuran huruf, pewarnaan, format gambar dan sebagainya. Selanjutnya lihat kode $\LaTeX$ yang dihasilkan berupa teks yang diawali dengan karakter backslash (\) pada kotak input, kemudian di bawah kotak input ada ruang untuk tempat simbol yang diklik tadi, dan pada kotak output ada kode yag diawali dengan <img src ... />. Ada dua pilihan dalam memasukkan kode $\LaTeX$ hasil dari CodeGogs tersebut ke dalam blog. Yang pertama adalah berupa kode $\LaTeX$ dengan awalan backslash dan yang kedua berupa image. Tentu saja pilihan pertama adalah yang direkomendasikan karena paling sesuai dengan kaidah penulisan matematika. Dengan banyak latihan tentunya kita akan hapal kode-kode $\LaTeX$ baik simbol, notasi, rumus, ataupun persamaan-persamaan matematika. Jika Anda mengcopy kode $\LaTeX$ dari CodeGogs sebaiknya pastekan di blog dalam mode html bukan dalam mode menulis. Sebagai contoh berikut ini Admin berikan kode $\LaTeX$ dan tampilannya di blog.
Operasi Hitung
Operasi hitung di sini meliputi penjumlahan, pengurangan, perkalian, dan pembagian.
| Kode $\LaTeX$ | Hasil |
|---|---|
| a+b | $a+b$ |
| c-d | $c-d$ |
| a\times b | $a\times b$ |
| c\div d | $c\div d$ |
Perpangkatan
Untuk perpangkatan kita gunakan karakter ^ misalnya \3^2 akan menghasilkan $3^2$. Jika pangkatnya majemuk, maka kita apit pangkat tersebut dengan kurung kurawal { }. Selanjutnya untuk subscript atau indeks di bawah, kita gunakan karakter underscore _. Jika subscriptnya majemuk, gunakan kurung kurawal untuk mengapitnya.
| 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
Untuk menuliskan pecahan kita memerlukan kode \frac. Sintaksnya adalah \frac {num}{den}, dengan num adalah numerator atau pembilang dan den adalah denumerator alias penyebut. Untuk menampilkan pecahan dengan ukuran lebih besar gunakan kode \dfrac. Perhatikan contoh berikut.
| 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
Untuk menuliskan simbol integral kita menggunakan kode \int. Batas atas dan bawah dituliskan dengan kode ^ dan _. Perhatikan contoh berikut.
| 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
Untuk menuliskan diferensial atau turunan, kita bisa menggunakan kode \frac atau \dfrac. Untuk turunan parsial misalnya z adalah fungsi dari x dan y, maka kita tambahkan kode \partial. Perhatikan contoh berikut.
| 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
Untuk simbol akar digunakan kode
\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
Berikut ini diberikan contoh-contoh penulisan kode $\LaTeX$ untuk 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
Persamaan berlanjut di sini maksudnya adalah persamaan yang memiliki beberapa baris. Untuk membuat persamaan berlanjut kita membutuhkan lingkungan (environment) seperti equation, align, dan array. Sebagai contoh perhatikan kode $\LaTeX$ berikut.
\begin{align} y&=(x+a)(x-a)\\ &=x^2-ax+ax-a^2\\ &=x^2-a^2 \end{align}
Hasil dari kode tersebut adalah sebagai berikut.
$$\begin{align}
y&=(x+a)(x-a)\\
&=x^2-ax+ax-a^2\\
&=x^2-a^2
\end{align}$$
Jika ingin menghilangkan nomor persamaan, kita dapat menggunakan tanda (*) setelah kata align. Contoh berikut diperoleh setelah menambahkan tanda (*).$$\begin{align*}
y&=(x+a)(x-a)\\
&=x^2-ax+ax-a^2\\
&=x^2-a^2
\end{align*}$$Selanjutnya untuk kode $\LaTeX$ menggunakan array. Sebagai contoh perhatikan kode berikut.
\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}
Hasil dari kode tersebut adalah sebagai berikut.
$$\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).
Jika kita ingin melihat notasi ataupun simbol matematika lainnya yang ditulis dalam LaTeX lainnya, kita bisa membaca dokumentasinya secara lengkap dan terperinci di The Comprehensive $\LaTeX$ Symbol List karya dari Scott Pakin, atau langsung mengunduhnya dengan mengklik tombol download di bawah ini.
Perhatian : Tidak semua kode $\LaTeX$ dapat 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
Jika Anda ingin menggunakan script dari MathJax, buka dashboard blog >> Tema >> Edit html >>salin script berikut dan letakkan di atas </head>
<script src='//cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
MathJax.Hub.Config({
extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\(","\)"] ],
displayMath: [ ['$$','$$'], ["\[","\]"] ],
},
"HTML-CSS": { availableFonts: ["TeX"] }
});
</script>Klik simpan/save. Atau bisa juga menempatkannya di widget dengan cara masuk dashboard blog >> Tata Letak >> Pilih widget >> Tambahkan widget >> Pilih HTML/Javascript >> Judul dikosongkan, dan salin kode tersebut >> Klik Simpan/Save.
Bagi Anda yang menggunakan WordPress, bisa menggunakan Plugin WP Quick LaTeX, Simple Mathjax, ataupun yang lainnya. Juga bisa menempatkan script dari MathJax tersebut dengan cara : Pengaturan >> Penyunting Tema >> Heade.php >> Tempatkan di atas <body>. Tetapi jika update atau ganti tema WordPress, maka script MathJax tersebut akan terhapus. Adapun script MathJax untuk WordPress adalah sebagai berikut.
<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.
$$\KaTeX$$
Bagi Anda yang akan menggunakan script dari $$\KaTeX$$, silakan salin script berikut dan tempatkan di atas </head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js" integrity="sha384-pK1WpvzWVBQiP0/GjnvRxV4mOb0oxFuyRxJlk6vVw146n3egcN5C925NCP7a7BY8" crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<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);"></script>
Cara menempatkannya sama seperti memasang script MathJax di atas. Lalu, sebaiknya menggunakan script dari MathJax atau $$\KaTeX$$? Untuk perbandingan kecepatan loading dalam menampilkan kode $\LaTeX$, Anda dapat melihatnya di sini.
Menyisipkan Spasi
Pada mode persamaan, baik dengan apitan dollar, kurung biasa, kurung siku, atau lingkungan (environment), maka $\LaTeX$ mengabaikan spasi. Sebagai contoh, kode y= mx + c dan y=mx+c akan menghasilkan tampilan yang sama yaitu $y=mx+c$.
Jika kita ingin menambahkan spasi pada persamaan, maka kita bisa 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
Setelah kode $\LaTeX$ ditulis dan ditampilkan oleh MathJax atau $$\KaTeX$$ maka akan terlihat notasi atau rumus tersebut. Sebagai contoh perhatikan kode berikut.
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}Kode tersebut akan ditampilkan sebagai berikut.
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)^2=R^2\].
Persamaan parabola di sisi lain dinyatakan dengan persamaan :
\begin{equation}
x=ay^2+by+c
\end{equation}
Terlihat bahwa, persamaan yang diapit oleh tanda dollar ($$) akan ditampilkan dalam pada baris yang sama, persamaan yang diapit oleh backslash-kurung siku \[ dan tanda \] akan diletakkan pada baris sendiri namun tanpa nomor persamaan, sedangkan yang diapit oleh lingkungan equation akan diletakkan pada baris sendiri dan diberi nomor persamaan.
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.
Penutup
Kesan pertama setelah melihat kode-kode $\LaTeX$ mungkin tidak menggoda, rumit dan berbelit-belit. Tetapi ini adalah suatu alternatif yang baik untuk diambil dan dijalankan dalam menuliskan rumus matematika di Blog. Anda hanya cukup menuliskan kode $\LaTeX$ di blog dan biarkan script MathJaX atau $$\KaTeX$$ bekerja menampilkannya. Bagaimana menurut Anda? Demikian artikel tentang bagaimana caranya menulis rumus matematika di blog menggunakan $\LaTeX$, MathJax, dan $$\KaTeX$$, dibantu oleh sebuah tools yaitu CodeGogs. Jika ada saran da masukan silakan tuliskan di kolom komentar. Semoga bermanfaat. Terima kasih.