Cara Menulis Rumus Matematika terkait Meteorologi pada Website atau Blog Berbasis HTML Menggunakan MathJax

Cara Menulis Rumus Matematika terkait Meteorologi pada Website atau Blog Berbasis HTML Menggunakan  Editor Latex

Meteorologi merupakan disiplin  ilmu yang banyak terkait dengan rumus matematika dan fisika. Tantangan terbesar menulis artikel tentang cuaca dan iklim dalam web atau blog adalah menampilkan persamaan matematika ke dalamnya.

Ada banyak cara menampilkan rumus matematika dalam web, yang paling sederhana adalah dengan mengunggah image rumus tersebut. Cara seperti ini sederhana tapi kadang kurang rapi dan resolusi gambarnya susah disesuaikan.

Dalam artikel climate4life kali ini, adalah menulis rumus matematika secara langsung seolah-olah mengetik teks biasa dalam artikel baik dalam mode menulis (compose) ataupun mode html. 

Alat yang diperlukan

Untuk menulis rumus matematika terkait persamaan terkait fisika meteorologi ada dua hal yang perlu kita siapkan.

Pertama script MathJax untuk kita tanam pada html web atau blog kita dan yang kedua adalah tools editor untuk menyusun rumusnya, yang umum dipakai adalah Latex Editor.

Script MathJax

Script MathJax seperti di bawah ini, kita salin dan pastekan ke dalam halaman artikel tentunya dalam mode html.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script> code-box

Baiknya letakkan pada baris paling atas pada artikel yang akan kita tulis.

Penempatan script MathJax pada artikel saat dalam mode html

Untuk meneruskan penulisan artikel web atau blog, kita dapat kembali ke tampilan penulisan atau mode compose.

Latex Editor

Latex Editor berfungsi equation pada Ms. Word, namun berjalan pada browser. Notasi rumus-rumus kita tuliskan pada editor matematika ini, kemudian kita salin dan paste ke dalam postingan web atau blog yang sudah  terpasang Script MathJax tersebut.

Untuk mengakses Latex Editor, cukup buka url ini,

https://latex.codecogs.com/eqneditor/editor.php code-box

Pada peramban web kita akan terbuka halaman seperti ini. 

Tampilan halaman Latex Editor

Bagian atas adalah notasi-notasi yang kita perlukan untuk membuat rumus dengan simbol-simbol yang tidak bisa didapatkan dengan menu teks biasa.

Kotak di bawahnya adalah baris untuk menuliskan rumusnya.

Mulai Menulis Rumus

Rumus sederhana

Misalnya kita ini membuat persamaan \(y = x^{2} + 2\), maka pada editor latex kita kita akan mengetik seperti ini.

Tampilan menulis notasi rumus, pada bagian bawah adalah hasil persamaan matematikanya. Jika masih belum sesuai, kita bisa mencoba berbagai simbol dan kode yang diinginkan.

Untuk memindahkan rumus tersebut ke postingan blog, salin notasi y = x^{2} + 2 dan pastekan ke dalam artikel dengan menyisipkannya di antara kode seperti ini.

\[ rumus dari latex editor \] code-box

Penulisannya dalam artikel web/blog menjadi seperti ini;

\[y = x^{2} + 2\] code-box

Maka hasilnya dalam postingan website akan terlihat seperti ini:

\[y = x^{2} + 2\] alert-info

Penggunaan notasi "\[" dan "\]" akan mengunci rumus yang kita buat tampil rata tengah dan tidak bisa diatur rata kiri atau kanan serta inline kalimat atau narasi teks lainnya.

Untuk itu, kita bisa mengganti notasi \[ ... \] dengan \( ... \)  agar rumus yang kita buat tersebut menjadi inline dengan naskah atau teks dan bisa menjadi rata kiri ataupun kanan.

Contoh penulisannya,

Ini adalah persamaan matematika sederhana \(y = x^{2} + 2\) yang merupakan fungsi eksponensial. code-box

Hasilnya, persamaan matematika dari editor latex seolah menjadi teks biasa dalam paragraf artikel kita, seperti ini.

Ini adalah persamaan matematika sederhana \(y = x^{2} + 2\) yang merupakan fungsi eksponensial. alert-info

Bandingkan jika kita menggunakan notasi [ ... ].

Ini adalah persamaan matematika sederhana \[y = x^{2} + 2\] yang merupakan fungsi eksponensial. code-box

Hasilnya:

Ini adalah persamaan matematika sederhana \[y = x^{2} + 2\] yang merupakan fungsi eksponensial. alert-info

Terlihat jelas rumus yang kita buat menjadi rata tengah dan membuat kalimat menjadi terpenggal.

Penomoran rumus

Dalam menurunkan persamaan dalam fisis meteorologi tentunya akan banyak rumus yang digunakan. Untuk itu setiap persamaan perlu diberi nomor.

Kita membutuhkan notasi "\tag {...}" yang ditambahkan saat pengetikan ke artikel blog, seperti ini.

    \[ pV = mRT \tag{1} \] 
    \[ p=\rho RT  \tag{2} \] code-box

Hasilnya seperti ini,

\( pV = mRT \tag{1} \) \( p=\rho RT \tag{2} \) alert-info

Menambahkan spasi

Latex edtior menyediakan fasilitas spasi jika ingin memberi jarak pada rumus matematika yang kita buat buat yaitu menggunakan "\" yang tambahan pada belakang notasi.

Misalnya pada persamaan (1) di atas kita ingin agar jarak antar huruf terdapat spasi maka penulisannya seperti ini.

\(pV = mRT \) tanpa spasi,
 \(p\ V = m\ R\ T \) dengan spasi code-box

Hasilnya:

\(pV = mRT \) tanpa spasi,
\(p\ V = m\ R\ T \) dengan spasi alert-info

Menulis persamaan dalam beberapa baris

Editor matematika Latex menyediakan fasilitas untuk menulis persamaan dalam beberapa baris. Untuk pemisahnya menggunakan "\\".

Misalnya penyelesaian fungsi berikut;

\(
x^{2} + 4x - 5 = 0 \\
(x-1)(x+5)=0 \\ x_{1}-1=0 \\
\rightarrow x_{1} =1, \\
x_{2}+5=0 \\
\rightarrow x_{2}=-5 \) code-box

Hasilnya,

\( x^{2} + 4x - 5 = 0 \\ (x-1)(x+5)=0 \\ x_{1}-1=0 \\ \rightarrow x_{1} =1, \\ x_{2}+5=0 \\ \rightarrow x_{2}=-5 \) alert-info

Merapikan rumus

Seperti terlihat pada penyelesaian fungsi di atas, kita bisa membuat beberapa baris penurunan penyelesaian fungsi matematika, namun terlihat masih berantakan.

Untuk merapikan, kita membutuhkan deklarasi "\begin{align*}" sebagai pembuka dan "\end{align*}" sebagai penutup serta "&" sebagai penentu patokan kelurusan persamaan.

Penulisannya seperti ini,

\begin{align*}
x^{2} + 4x - 5 &= 0 \\
(x-1)(x+5) &=0 \\
x_{1}-1 &=0 \\
\rightarrow x_{1} &=1, \\
x_{2}+5 &=0 \\
\rightarrow x_{2}&=-5
\end{align*} code-box

Hasilnya,

\begin{align*} x^{2} + 4x - 5 &= 0 \\ (x-1)(x+5) &=0 \\ x_{1}-1 &=0 \\ \rightarrow x_{1} &=1, \\
x_{2}+5 &=0 \\ \rightarrow x_{2}&=-5 \end{align*} alert-info

Mencoret rumus

Adakalanya dalam penurunan rumus, terdapat notasi yang harus dicoret untuk menyederhanakan penyelesaian. Latex editor menyediakan fungsi tersebut dengan \cancel, \bcancel dan \xcancel, dengan perbedaan hasil pada bagian bawah.

Untuk menjalankan fungsi tersebut pada html dengan MathJax, kita memerlukan deklarasi \require{cancel} yang didahului \begin{align*}.

Contohnya sebagai berikut,

\begin{align*}
\require{cancel}
x^{2} + \cancel 4x - \cancel 5 = 0 \\ fungsi "cancel"
x^{2} + \cancel {4x} - \cancel 5 = 0 \\ fungsi "cancel"
x^{2} + \bcancel 4x - \bcancel5 = 0 \\ fungsi "bcancel"
x^{2} + \bcancel {4x} - \bcancel 5 = 0 \\ fungsi "bcancel"
x^{2} + \xcancel 4x - \xcancel5 = 0 \\ fungsi "xcancel"
x^{2} + \xcancel {4x} - \xcancel 5 = 0 \\ fungsi "xcancel"
\end{align*} code-box

Hasilnya,

\begin{align*} \require{cancel} x^{2} + \cancel 4x - \cancel 5 &= 0\ \text{(\cancel)} \\ x^{2} + \cancel {4x} - \cancel 5 &= 0\ \text{(\cancel)} \\ x^{2} + \bcancel 4x - \bcancel5 &= 0\ \text{(\bcancel)} \\ x^{2} + \bcancel {4x} - \bcancel 5 &= 0\ \text{(\bcancel)} \\ x^{2} + \xcancel 4x - \xcancel5 &= 0\ \text{(\xcancel)} \\ x^{2} + \xcancel {4x} - \xcancel 5 &= 0\ \text{(\xcancel)} \\ \end{align*} alert-info

Demikianlah bagaimana cara kita menurulis persamaan matematika dengan script MathJax menggunakan kode html biasa pada web atau blog kita.

Climate4life.info mendapat sedikit keuntungan dari penayangan iklan dan digunakan untuk operasional blog ini.

Jika menurut anda artikel ini bermanfaat, maukah mentraktir kami secangkir kopi melalu "trakteer id"?