author Ahmad Muhardian

Menulis Rumus Matematika di HTML dengan MathJax


Tutorial menggunakan Mathjax di HTML

Rumus matematika biasanya akan sering kita temui pada web pendidikan atau akademis.

Contohnya seperti ini:

Rumus matematika di Wikipedia

Rumus matematika di HTML sebenarnya bisa kita tampilkan dengan gambar. Namun, tidak interaktif dan dinamis.

Selain dengan Gambar, kita juga busa menampilkannya dengan MathML. MathML adalah sebuah bahasa markup yang khusus untuk menulis rumus matematika di HTML dan XML.

Namun, kekurangan dari MathML adalah sintaksnya ditulis dengan sintaks ala bahasa HTML dan XML, yakni dengan tag. Sehingga membuatnya sulit dibaca.

Nah, cara lain kita bisa menggunakan Mathjax.

Apa itu Mathjax?

dan bagaimana cara menggunakannya di HTML?

Mari kita bahas..

Apa itu MathJax?

Mathjax merupakan library Javascript untuk menampilkan (display engine) notasi rumus matematika dalam LaTex, MathML, dan AsciiMath. 1

Contoh: notasi matematika dalam LaTex:

latex math

Contoh: notasi Matematika dalam MathML:

<math mode="display" xmlns="http://www.w3.org/1998/Math/MathML">
 <semantics>
  <mrow>
    <mi>x</mi>
    <mo>=</mo>
    <mfrac>
      <mrow>
        <mo form="prefix">&minus;</mo>
        <mi>b</mi>
        <mo>&pm;</mo>
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>&minus;</mo>
          <mn>4</mn><mo>&it;</mo><mi>a</mi><mo>&it;</mo><mi>c</mi>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn>
        <mo>&it;</mo>
        <mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
  <annotation encoding="application/x-tex"><!-- TeX -->
     x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}
  </annotation>
  <annotation encoding="StarMath 5.0">
     x={-b plusminus sqrt {b^2 - 4 ac}} over {2 a}
  </annotation>
  <!-- More annotations can be written: application/x-troff-eqn for eqn, application/x-asciimath for AsciiMath... -->
  <!-- Semantic MathML go under <annotation-xml encoding="MathML-Content">. -->
 </semantics>
</math>

Hasilnya:

mathml output

Contoh: notasi Matematika dalam AsciiMath:

asciimath

Berdasarkan contoh tersebut, kita bisa merasakan..

Membuat notasi matematika dengan MathML memang relatif sulit dan panjang dibandingkan dengan LaTex dan AsciiMath.

Nah, berkat MathJax kita bisa menulis notasi matematika dengan tiga notasi tersebut.

Menggunakan MathJax dengan LaTex

Pertama kita perlu sisipkan dulu MathJax di HTML.

Berikut ini kodenya:

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-chtml.js">
</script>

Kodenya bisa ditulis di dalam tag <head> dan juga di dalam <body>.

Perhatikan!

Pada kode di atas kita memberikan konfigurasi untuk inlineMath menggunakan $ dan \(.

Apa itu inlineMath?

Iniline math adalah notasi matematika yang ditulis di dalam baris teks. Ada juga notasi matematika yang ditulis dalam blok, ini bisa kita buat dengan double dolar.

Contoh:

<p>
Ini Rumusnya: $f(x)=\sqrt{x^2 + 5y^4}$
</p>
  
<p>
Ini Rumusnya: $$f(x)=\sqrt{x^2 + 5y^4}$$
</p>
Kode lengkapnya
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <p>
    Ini Rumusnya: $f(x)=\sqrt{x^2 + 5y^4}$
  </p>

  <p>
    Ini Rumusnya: $$f(x)=\sqrt{x^2 + 5y^4}$$
  </p>

  <script>
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
  };
  </script>
<script id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-chtml.js">
</script>

</body>
</html>

Hasilnya:

mathjax inline dan block

Menggunakan MathJax dengan AsciiMath

Cara menggunakan AsciiMath berbeda dengan LaTex.

Jika ingin menggunakan LaTex, kita harus menyisipkan tex-chtml.js.

Namun, jika ingin menggunakan AsciiMath, konfigurasinya akan seperti ini:

<script>
  MathJax = {
  loader: {load: ['input/asciimath', 'output/chtml', 'ui/menu']},
  asciimath: {
    delimiters: [['$','$'], ['`','`']]
  }
  };
</script>
<script type="text/javascript" id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/[email protected]/es5/startup.js">
</script>

Lalu, kita akan bisa menggunakan notasi AsciiMath dengan $ dan ` (backtick).

Contoh:

<p>Ini rumusnya: $sum_(i=1)^n i^3=((n(n+1))/2)^2$</p>
Kode lengkapnya
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <p>Ini rumusnya: $sum_(i=1)^n i^3=((n(n+1))/2)^2$</p>
  
  <script>
  MathJax = {
  loader: {load: ['input/asciimath', 'output/chtml', 'ui/menu']},
  asciimath: {
    delimiters: [['$','$'], ['`','`']]
  }
  };
  </script>
  <script type="text/javascript" id="MathJax-script" async
    src="https://cdn.jsdelivr.net/npm/[email protected]/es5/startup.js">
  </script>
</body>
</html>

Hasilnya:

mathjax asciimath

Untuk mempelajari notasi AsciiMath, silahkan baca di dokumentasinya.

Menggunakan MathJax dengan MathML

MathML sebenarnya sudah didukung secara native di beberapa browser.

Namun, apabila kita ingin menampilkan rumus secara interaktif. Maka kita bisa gunakan MathJax.

Caranya:

Silahkan gunakan mml-chtml.js seperti ini:

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/[email protected]/es5/mml-chtml.js">
</script>

Setelah itu, kita bisa menuliskan notasi MathML seperti ini:

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
  <mo>+</mo> <mi>b</mi><mi>x</mi>
  <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math>
and they are
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>x</mi> <mo>=</mo>
  <mrow>
    <mfrac>
      <mrow>
        <mo>&#x2212;</mo>
        <mi>b</mi>
        <mo>&#x00B1;</mo>
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>&#x2212;</mo>
          <mn>4</mn><mi>a</mi><mi>c</mi>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn><mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
  <mtext>.</mtext>
</math>
Kode Lengkapnya
<!DOCTYPE html>
<html>
<head>
<title>MathJax MathML Test Page</title>
</head>
<body>

<p>
When
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi><mo>&#x2260;</mo><mn>0</mn>
</math>,
there are two solutions to
<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi>a</mi><msup><mi>x</mi><mn>2</mn></msup>
  <mo>+</mo> <mi>b</mi><mi>x</mi>
  <mo>+</mo> <mi>c</mi> <mo>=</mo> <mn>0</mn>
</math>
and they are
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <mi>x</mi> <mo>=</mo>
  <mrow>
    <mfrac>
      <mrow>
        <mo>&#x2212;</mo>
        <mi>b</mi>
        <mo>&#x00B1;</mo>
        <msqrt>
          <msup><mi>b</mi><mn>2</mn></msup>
          <mo>&#x2212;</mo>
          <mn>4</mn><mi>a</mi><mi>c</mi>
        </msqrt>
      </mrow>
      <mrow>
        <mn>2</mn><mi>a</mi>
      </mrow>
    </mfrac>
  </mrow>
  <mtext>.</mtext>
</math>
</p>

  
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async
  src="https://cdn.jsdelivr.net/npm/[email protected]/es5/mml-chtml.js">
</script>
</body>
</html>

Hasilnya:

mathjax mathml

Akhir kata..

Nah, begitulah cara menampilkan rumus HTML dengan MathJax. Kamu bisa tentukan akan menggunakan notasi yang mana.

LaTex, AsciiMath, dan MathML.

Pilih saja salah satu.

Oh iya, selain digunakan di HTML atau sisi client. MathJax juga bisa digunakan di sisi server dengan Nodejs. Contohnya bisa dilihat di repository ini: Mathjax-demos-node.

Jika ada pertanyaan seputar MathJax, mari sampaikan di kolom komentar!

Baca Juga ini

7 Manfaat Inspect Element Bagi Web Developer

7 Manfaat Inspect Element Bagi Web Developer

Inspect Element merupakan fitur browser yang dibuat untuk memudahkan pengembangan web. Inspect Element dapat kita akses dengan klik kanan, kemudian memilih Inspect Element, atau bisa juga dengan menekan tombol F12. Adapun manfaat dari Inspect Element untuk web Developer adalah sebagai berikut. 1. Tempat Eksperimen CSSSelain ada console Javascript, bisa dibilang di Inspect Elemen juga ada console-nya CSS. Ya, di sana kita bisa eksperimen kode CSS. Sebelum kita menulis kode CSS, sebaiknya gunakan Inspect Element terlebih dahulu.

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tutorial Bootstrap: Memahami Fungsi Tag Meta Viewport

Tag Meta Viewport adalah tag HTML yang penting bagi Bootstrap untuk membuat halaman web menjadi responsif.

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Tutorial Bootstrap: Pengenalan Dasar Bootstrap untuk Pemula

Pada tutorial ini, kamu akan belajar dasar Bootstrap. Mulai mengenal sejarah bootstrap, hingga mencoba sendiri Bootstrap pada HTML

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

Belajar HTML #02: Apa itu Tag, Elemen, dan Atribut dalam HTML?

Memahami apa itu Tag, Elemen, dan Atribut. Serta perbedaanya.

Belajar PHP: Memahami 4 Jenis Perulangan dalam Pemrograman PHP

Belajar PHP: Memahami 4 Jenis Perulangan dalam Pemrograman PHP

Perulangan adalah hal dasar yang harus dipelajari dalam pemrograman PHP. Pada artikel ini, kita akan belajar jenis perulangan di PHP.

Belajar Javascript: Mengenal Objek Math untuk Perhitungan Matematika

Belajar Javascript: Mengenal Objek Math untuk Perhitungan Matematika

Objek `Math` adalah objek yang berisi fungsi-fungsi matematika dan beberapa konstanta untuk melakukan perhitungan matematika seperti sin, cos, tan, eksponen, akar kuadrat, dll.