Matematika, fisika, kimia tidaklah lepas dari notasi, simbol dan rumus. ara Menampilkan Rumus Matematika Equation di Blog

Website dengan niche pendidikan seperti matematika, fisika, kimia tidaklah lepas dari notasi, simbol dan rumus. Kali ini akan dibagikan bagaimana cara menulis rumus matematika di blog.

Sebenarnya banyak cara sih untuk bisa menampilkan rumus matematika di blog. Kita bisa saja menggunakan gambar semisal menulis di word dulu terus di screenshoot atau menggunakan codecogs online. Namun kayaknya ribet. hehe

Kali ini kita bisa menggunakan ala-ala menulis latex dengan bantuan menggunakan Mathjax atau Katex sebagai pengganti latex di blog.. Tentu sobat bisa pilih salah satu saja dari dua alternatif itu.. Tidak perlu keduanya… Bagaimana caranya yuuk langsung saja ikuti..

Cara Menampilkan Rumus dengan Mathjax

MathJax adalah tool yang paling populer dalam menampilkan $\LaTeX$ ↝ atau rumus matematika di blog/website. Sobat tinggal menambahkan script MathJax↝ ke dalam blog sobat. Berikut langkah-langkah menulis rumus menggunakan MathJax

  1. Masuk ke dalam tema editor HTMLnya, bagi pengguna blogger silakan login, pilih tema, kemudian pilih edit HTML.
  2. Masukkan kode script berikut di bawah kode <head> atau diatas </head>
1 <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

  1. Untuk konfigurasi agar bisa menggunakan kode $ rumus $ tambahkan kode berikut

     1 <script>
 2 MathJax = {
 3   tex: {
 4     inlineMath: [['$', '$'], ['\\(', '\\)']],
 5     displayMath: [['$$', '$$'], ['\\[', '\\]']],
 6   },
 7   svg: {
 8     fontCache: 'global'
 9   }
10 };
11 </script>

    sehingga script yang dimasukkan di tag <head> adalah seperti berikut

     1<head>
 2 <!--baris atas-->
 3 <!--Start Mathjax-->
 4<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 5<script>
 6 MathJax = {
 7   tex: {
 8     inlineMath: [['$', '$'], ['\\(', '\\)']],
 9     displayMath: [['$$', '$$'], ['\\[', '\\]']],
10   },
11   svg: {
12     fontCache: 'global'
13   }
14 };
15 </script>
16 <!--End Mathjax-->
17 </head>

  2. Selanjutnya simpan

  3. Sudah terpasang mathjaxnya tinggal kita coba menulis pada blognya.

    • untuk menampilkan dalam inline text (satu baris dalam text) gunakan $...$ atau dengan \(...\)
      Contoh $x^2+8x+6=0$ maka tampilannya seperti ini (x^2+8x+6=0)
    • untuk menampilkan display antar text (atas bawah text) gunakan $$...$$ atau dengan \[...\]
      contoh Text 1 $$x^2+8x+6=0$$ Text 2 maka tampilannya adalah
      Text 1 $$x^2+8x+6=0$$ Text 2

Cara Menampilkan Rumus dengan Katex

Alternatif lain dari MathJax adalah $\KaTeX$↝ . Kelebihan dari $\KaTeX$ adalah sangat cepat dalam menampilkan rumus matematika dan sangat ringan. Langkah-langkah dalam memasukkannya sama dengan langkah menggunakan MathJax tadi. bedanya script yang kita masukkan dalam tag <head> adalah sebagai berikut

 1<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css" integrity="sha384-vKruj+a13U8yHIkAyGgK1J3ArTLzrFGBbBc0tDp4ad/EyewESeXE/Iv67Aj8gKZ0" crossorigin="anonymous">
 2<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js" integrity="sha384-PwRUT/YqbnEjkZO0zZxNqcxACrXe+j766U2amXcgMg5457rve2Y7I6ZJSm2A0mS4" crossorigin="anonymous"></script>
 3<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
 4<script>
 5    document.addEventListener("DOMContentLoaded", function() {
 6        renderMathInElement(document.body, {
 7          // customised options
 8          // • auto-render specific keys, e.g.:
 9          delimiters: [
10              {left: '$$', right: '$$', display: true},
11              {left: '$', right: '$', display: false},
12              {left: '\\(', right: '\\)', display: false},
13              {left: '\\[', right: '\\]', display: true}
14          ],
15          // • rendering keys, e.g.:
16          throwOnError : false
17        });
18    });
19</script>

Blog yang mengguakan Sinau Matematika↝ ini menggunakan $\KaTeX$ lho.. Blog ini pilih Katex karena rendernya cepat dibanding Mathjax.

Mau tahu seberapa cepat $\KaTeX$? Coba lihat perbandingan kecepatan $\KaTeX$ dengan $\LaTeX$ MathJax dalam artikel KaTeX and MathJax Comparison Demo↝ .

Contoh tampilan rumus dari $\KaTeX$: $$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$$

ditulis dengan

$$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$$

The Most Beautiful Equation ever adalah $e^{i\pi }+1=0$.

ditulis dengan The Most Beautiful Equation ever adalah $e^{i\pi }+1=0$.