favicon
Website ini sudah tersedia untuk aplikasi
Download sekarang

Menggunakan Mathjax pada HTML

   
Menggunakan Mathjax pada HTML

Menggunakan Mathjax pada HTML


 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)=x2+5y4

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:

Last update
Add Comment

⚡ Trending!