Menulis Rumus Matematika di Blog

Pengantar

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:

EqEditor.embed(’editor’,’’); var a=new EqTextArea(’equation’, ’testbox’); EqEditor.add(a,false); a.addExportArea(’exportarea1’,‘html’); a.addExportArea(’exportarea3’,’tw’); a.addExportArea(’exportarea4’,‘url’); a.addExportArea(’exportarea5’,‘url’); 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 YunaniHuruf Yunani ada yang ditulis dalam huruf kecil dan huruf besar. Huruf Yunani yang ditampilkan dalam tabel berikut tidak diberi spasi agar kode $\LaTeX$nya lebih jelas dipahami.

   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

Titik tiga biasanya berbentuk horizontal, vertikal, dan diagonal serta agak ke bawah. Bagaimana cara membuatnya? Perhatikan contoh berikut.

   Kode $\LaTeX$
Hasil



\cdots
$\cdots$


\vdots
$\vdots$


\ddots
$\ddots$

1\ldots 10 $1\ldots 10$

Matriks

Matriks biasanya dituliskan dalam tanda kurung biasa dan kurung siku.

   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

Persamaan bercabang biasanya kita jumpai dalam sistem persamaan linear dua atau tiga variabel.

   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

Variabel bertopi digunakan untuk menyatakan nilai rata-rata atau nilai estimasi. Variabel bertopi biasanya disebut dengan bar, hat, dan tilde.

   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.

Jika ingin menghilangkan nomor persamaan, kita dapat menggunakan tanda () setelah kata align. Contoh berikut diperoleh setelah menambahkan tanda ().

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.

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.

Aan_Symbol_a4.pdf 21 Mb

https://drive.google.com/file/d/1hPn5APXDedAkgZwaKKcvBpDIuKxLxzGY/view?usp=sharingPerhatian : 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

MathJax merupakan library Javascript untuk menampilkan (display engine) notasi rumus matematika dalam $\LaTeX$, MathML, dan AsciiMath.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: [&quot;tex2jax.js&quot;,&quot;TeX/AMSmath.js&quot;,&quot;TeX/AMSsymbols.js&quot;], jax: [&quot;input/TeX&quot;, &quot;output/HTML-CSS&quot;], tex2jax: { inlineMath: [ [&#39;$&#39;,&#39;$&#39;], [&quot; \(&amp;quot;,&amp;quot;\)&quot;] ], displayMath: [ [&#39;

&#39;], [&quot;

&quot;] ], }, &quot;HTML-CSS&quot;: { availableFonts: [&quot;TeX&quot;] } }); </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

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}