Ketika membaca halaman wikipedia yang memiliki rumus, kita temuakan rumus tersebut dibuat dalam bentuk gamabar.

Contoh, coba cek halaman ini.

Rumus matematika di Wikipedia

HTML sendiri memiliki sebuah tag untuk menuliskan rumus matematika. Tapi cukup panjang untuk menggunakannya.

Karena itu, biar tidak repot, kita bisa menggunakan kode LaTex saja dengan library MathJax.

Apa itu MathJax?

MathJax merupakan pustaka (library) javascript untuk menampilkan (render) hasil kode LaTeX, MathML, dan Notasi AsciiMath ke dalam HTML.

MathJax diklaim dapat bekerja di semua browser.

Cara Menggunakan MathJax

Pertama kita perlu inisialisasi dulu di dalam tag <head> atau di akhir tag <body>.

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

Selanjutnya, untuk menuliskan sebuah rumus, kita dapat menggunakan perintah LaTeX yang diapit dengan tanda dolar ($).

Contoh:

$f(x)=\sqrt{x^2 + 5y^4}$

Akan menghasilkan:

$f(x)=\sqrt{x^2 + 5y^4}$

Mudah bukan?

Kode lengkapnya:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>

$f(x)=\sqrt{x^2 + 5y^4}$  


  <script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
  <script type="text/javascript" async
  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
</body>
</html>

Akhir kata…

Terima kasih sudah mengikuti tutorial ini, semoga bermanfaat.

Referensi: