Skip to main content

Membuat Rumus Matematika Untuk Blog/Website (LaTeX Online)

Kendala yang sering dialami ketika membuat website yang berhubungan dengan bidang Matematika, Fisika, Statistika atau Ilmu Sains lainnya adalah sulitnya menulis dan menampilkan rumus di dalam website tersebut dengan tampilan yang baik.

Seringkali rumus yang bisa ditampilkan adalah rumus dalam format images yang hasilnya tidak menarik karena bisa membuat tampilan tulisan lainnya menjadi berantakan.

Namun demikian, sekarang sudah ada tool yang dapat memudahkan kita dalam menuliskan dan menampilkan rumus yang indah di dalam website. Tool tersebut adalah \(\LaTeX\). Perhatikan tool di bawah ini dan cobalah membuat rumus yang diinginkan.


Tuliskan rumus pada form di bawah ini dengan bantuan tool di atas seperti menulis Equation di Microsoft Word:





Copy dan Paste script di bawah ini ke dalam website:

Beberapa Contoh Penulisan


Tool tersebut sangat user-friendly sehingga penulisan rumus menjadi lebih mudah. Berikut ini adalah beberapa contoh penulisannya.

Sumber Kode Tampilan Web
x+y
x \times y
\(x+y\)
\(x \times y\)
Pecahan
x/y
\frac {x}{y}
\(x/y\)
\(\displaystyle \frac {x}{y}\)
Akar
\sqrt[x]{y}
\sqrt{\sqrt{x}}
\(\sqrt[x]{y}\)
\(\sqrt{\sqrt{x}}\)
Tanda Kurung
(x)
\left[ \frac{1}{(x \times y)} \right]
\((x)\)
\[\left[ \frac{1}{(x \times y)} \right]\]
Bar dan Hat
\bar x
\hat y
\(\bar x\)
\(\hat y\)
Integral
\int \limits_{-\infty }^{\infty }{f(x)} \, dx


F(x) \Bigr|_{-\infty}^{\infty}
\[\int \limits_{-\infty }^{\infty }{f(x)} \, dx\]
\[F(x) \Bigr|_{-\infty}^{\infty}\]
Sigma dan Pi
\sum \limits_{i=1}^{n} {x_i}


\prod\limits_{i=1}^n{x_i}
\[\sum \limits_{i=1}^{n} {x_i}\]\[\prod \limits_{i=1}^n{x_i}\]
Permutasi dan Kombinasi
^nP_k
^nC_k
\[^nP_k\]\[^nC_k\]
Vektor dan Matriks
\left( \begin{matrix}
  y_1 \\
  y_2 \\
  \vdots \\
  y_n \\
\end{matrix} \right)


\left( \begin{matrix}
  1 & x_1 \\
  1 & x_2 \\
  \vdots & \vdots \\
  1 & x_n
\end{matrix} \right)
\[\left( \begin{matrix} y_1 \\ y_2 \\ \vdots \\ y_n \\ \end{matrix} \right)\]
\[\left( \begin{matrix} 1 & x_1 \\ 1 & x_2 \\ \vdots & \vdots \\ 1 & x_n \end{matrix} \right)\]


Pengertian \(\LaTeX\)


\(\LaTeX\) perupakan bahasa pemograman untuk penulisan standar notasi matematika. \(\LaTeX\) memiliki kemampuan yang sangat baik dalam menghasilkan dan menampilkan notasi dan rumus matematika. Dengan kemampuannya tersebut \(\LaTeX\) sering digunakan pada penulisan jurnal ilmiah seperti jurnal matematika, statistika, fisika, teknik, komputer dan lain-lain.

Penulisan notasi matematika pada \(\LaTeX\) didasarkan pada bahasa pemograman \(\TeX\) yang dibuat oleh Donald Knuth dari Universitas Stanford. Versi pertamanya dikeluarkan pada tahun 1978. Kemudian Leslie Lamport dari SRI Internasional membuat \(\LaTeX\) yang merupakan versi yang lebih user-friendly dari \(\TeX\). Kata "LaTeX" mempunyai gaya penulisan tersendiri yaitu \(\LaTeX.\) Versi terakhir dari \(\LaTeX\) adalah \(\LaTeX2e\).

Pada \(\LaTeX,\) notasi dan rumus matematika disajikan dalam bentuk miring (italics), misalnya \(f(x)=p^x+{(1-p)}^{1-p},\) kecuali pada fungsi-fungsi tertentu, misalnya \(\displaystyle \tan \theta=\frac{\sin\theta}{\cos\theta}\) atau \(\displaystyle \lim_{x \to 0}f(x)=1.\)

Penggunaan \(\TeX\) dan \(\LaTeX\) sangat dianjurkan pada jurnal ilmiah sebab penulisan notasi-notasi matematika harus dituliskan dengan baik dan benar. \(\TeX\) dan \(\LaTeX\) sangat mendukung hal tersebut. Perbedaan tulisan antara teks dan notasi matematika harus jelas. Coba perhatikan x dan \(x\) atau -1 dan \(-1.\) Dari keduanya, kita dapat mengetahui dengan mudah perbedaan antara teks dan notasi matematika.

\(\LaTeX\) pada Blog/Website


Ada dua cara menampilkan notasi dan rumus matematika di blog/website menggunakan \(\LaTeX.\)
  1. Pertama adalah dengan menggunakan tool yang telah disajikan di bagian atas. Dengan tool tersebut, kita hanya tinggal mengetikkan perintah di dalam kotak pertama dan secara bersamaan akan muncul rumus yang diinginkan di bagaian bawahnya beserta kode syntax di kotak kedua. Selanjutnya, kode syntax pada kotak kedua di-copypaste-kan ke dalam blog. Cara pertama ini tidak saya sarankan karena tampilannya tidak sebaik cara kedua.

  2. Cara kedua adalah dengan menggunakan javascript. Kita harus melakukan pengaturan terlebih dahulu dengan menempatkan kode javascript pada template blog. Jika anda menggunakan Blogspot (Blogger), anda bisa melakukan pengaturannya menggunakan MathJax. Letakkan script di bawah ini setelah kode <head>.

    <script src='//cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>
    MathJax.Hub.Config({
     extensions: [&quot;tex2jax.js&quot;,&quot;TeX/AMSmath.js&quot;,&quot;TeX/AMSsymbols.js&quot;],
     jax: [&quot;input/TeX&quot;, &quot;output/HTML-CSS&quot;],
     tex2jax: {
         inlineMath: [ [&#39;$&#39;,&#39;$&#39;], [&quot;\(&quot;,&quot;\)&quot;] ],
         displayMath: [ [&#39;$$&#39;,&#39;$$&#39;], [&quot;\[&quot;,&quot;\]&quot;] ],
     },
     &quot;HTML-CSS&quot;: { availableFonts: [&quot;TeX&quot;] }
    });
    </script>

    Saya sangat menyarankan cara yang kedua ini.

Jika anda menggunakan WordPress.com, anda tidak usah kecewa jika tidak bisa melakukan pengaturan pada template blog anda, sebab WordPress.com sendiri sudah mendukung \(\LaTeX.\) Silakan baca petunjuknya di Support - WordPress.com.

Jika anda menggunakan WordPress hosting sendiri, Anda bisa menggunakan plugin \(\LaTeX\) yang banyak tersedia di WordPress.org, diantaranya WP LaTeX dan Simple MathJax. Jika anda tidak ingin menggunakan plugin, silakan copy kode di bawah ini, dan paste-kan setelah kode <title>.

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


Inline dan Equation


Subbagian ini hanya dikhususkan untuk pengguna metode javascript. Saya menyarankan menggunakan metode javascript karena tampilannya lebih dinamis dan kualitasnya lebih baik. Metode ini memiliki dua tampilan yaitu inline dan equation.

Inline menempatkan notasi dan rumus matematika di antara kata-kata di dalam kalimat, sedangkan equation menempatkan notasi rumus matematika tersendiri pada baris baru (baris tersendiri) di bagian tengah (center).

Format penulisan inline biasanya digunakan untuk penulisan notasi satu karakter (misalnya \(\mu\) atau \(\sigma^2\)) atau rumus matematika yang pendek atau tidak terlalu kompleks, sedangkan format equation dibuat untuk rumus matematika yang dianggap penting atau terlalu komplek jika disajikan dalam bentuk inline.

Format inline dibuat dengan menempatkan notasi atau rumus matematika ditengah tanda dollar $, sedangkan equation dibuat dengan menempatkan notasi atau rumus matematika ditengah dua tanda dolar $$ atau di antara tanda \[ dan tanda \].

Jika kita membuka penulisan inline dengan tanda $ maka kita juga harus menutupnya dengan tanda $. Jika tidak maka syntax pada blog akan error. Hal ini juga berlaku untuk penulisan equation.

Contoh penulisan dengan tampilan inline adalah $\lim_{x \to 0}f(x)=1$ hasilnya adalah \(\lim_{x \to 0}f(x)=1,\) sedangkan contoh penulisan perintah equation adalah \[\lim_{x \to 0}f(x)=1\], tampilannya adalah \[\lim_{x \to 0}f(x)=1.\]
Dari contoh rumus di atas, terlihat bahwa ukuran tampilan inline tidak terlalu penuh sehingga kurang menarik untuk dilihat. Kita bisa menampilkannya secara penuh dengan menambahkan format \displaystyle. Contohnya $\displaystyle \bar{x}=\frac{1}{n}\sum\limits_{i=1}^{n}{x_i}$. Hasilnya adalah \(\displaystyle \lim_{x \to 0}f(x)=1\). Tampilannya sama dengan tampilan format equation.

Aturan Spasi


Penulisan notasi dan rumus matematika dengan \(\LaTeX\) tidak mengenal spasi dan enter. Penulisan y=a+bx akan memiliki hasil yang sama dengan y = a + bx, yaitu \(y =a+bx.\) \(\LaTeX\) selalu menampilkan notasi dan rumus matematika secara elegan.

Jika kita masih menginginkan adanya enter (spasi baru), maka kita bisa menambahkan kode \begin{align} di awal penulisan dan kode \end{align} di akhir penulisan serta kode \\ sebagai Enter. Misalnya

\begin{aligned}
  Rumus\\
  Matematika\\
  LaTeX 
\end{aligned}

Hasilnya adalah \[\begin{aligned} Rumus\\Matematika\\\LaTeX \end{aligned}\]

Penjumlahan, Pengurangan, Perkalian dan Pembagian


Operasi aritmatika penjumlahan (+) dan pengurangan (-) bisa langsung dituliskan tanpa adanya perintah khusus. Misalnya x+y atau x-y, hasilnya adalah \(x+y\) dan \(x-y.\) Selanjutnya operasi perkalian dan pembagian harus menggunakan perintah \times dan \div. Misalnya x \times y atau x \div y, hasilnya adalah \(x \times y\) dan \(x \div y.\)

Pecahan


Untuk menampilkan pecahan, perintah yang digunakan adalah \frac. Misalnya \frac{x}{y}. Hasilnya adalah \[\frac{x}{y}.\]

Superscript dan Subscript


Superscript dihasilkan melalui perintah ^, sedangkan subscript dihasilkan melalui perintah _. Misalnya penulisan e^x, e^{xy}, y_i , y_{ij} akan menghasilkan \(e^x,\) \(e^{xy},\) \(y_i,\) \(y_{ij}.\)

Coba perhatikan kembali superscript atau subscript pada contoh tersebut, jika superscript atau subscript-nya lebih dari satu digit maka kita harus menambahkan tanda kurung {}. Jika kita hanya menuliskan e^xy atau y_ij saja, maka hasilnya akan menjadi \(e^xy\) dan \(y_ij.\) Hasilnya tidak sesuai dengan yang kita harapkan.

Jika kita ingin membuat dua kali superscript, maka penulisannya adalah e^{x^{y+1}}, hasilnya adalah \(\displaystyle e^{x^{y}}.\) Begitu juga dengan penulisan untuk dua kali subscript y_{i_{jk}}, hasilnya adalah \(\displaystyle y_{i_{jk}}.\)

Permutasi dan Kombinasi


Perintah yang digunakan untuk membuat permutasi sama dengan perintah yang digunakan untuk membuat kombinasi. Permutasi ditulis menggunakan perintah ^nP_k, hasilnya adalah \(^nP_k.\) Kombinasi ditulis menggunakan perintah ^nC_k atau \binom{n}{k}, hasilnya adalah \(^nC_k\) dan \(\displaystyle \binom{n}{k}.\)

Integral


Perintah yang digunakan untuk menulis integral adalah \int, untuk integral lipat dua adalah \iint dan integral lipat tiga \iiint, tampilan hasilnya adalah \(\int,\) \(\iint\) dan \(\iiint.\) Contoh penulisannya \int \limits_{-\infty}^{\infty} {f(x)} \, dx, hasilnya adalah \[\int\limits_{-\infty}^{\infty}{f(x)}\,dx\]

Akar


Perintah yang digunakan untuk membuat akar adalah \sqrt. Misalnya \sqrt [2]{x}, hasilnya adalah \(\sqrt [2]{x}.\) Perintah untuk menampilkan akar banyak adalah \sqrt {\sqrt {\sqrt {\sqrt {x}}}}, hasilnya adalah \[\sqrt {\sqrt{\sqrt{\sqrt{x}}}}.\]

Tulisan Text dalam \(\LaTeX\)


Pada proses pembuatan notasi dan rumus matematika dengan \(\LaTeX,\) tulisan text tidak diizinkan. Dengan demikian, tanda spasi selalu diabaikan. Namun kita masih bisa menuliskan text dengan menggunakan perintah \text. Contoh penggunaannya adalah A=\left \{ x | x=2n, n \in \text {bilangan asli} <5 \right \}, hasilnya adalah \[A=\left \{ x | x=2n, n \in \text{bilangan asli } < 5 \right \}\]

Tanda Kurung


Tanda kurung bisa langsung dituliskan jika rumus yang dibuat tidak terlalu kompleks, misalnya (x) atau (x \times y), hasilnya \((x)\) dan \((x \times y).\) Namun jika rumusnya lebih kompleks, maka kita harus menambahkan kode \left dan \right. Misalnya \left (\frac {x}{y} \right )^2, hasilnya adalah \[\left (\frac {x}{y} \right )^2\] Jika kita tidak menambahkan kode tersebut, maka (\frac {x}{y})^2 hasilnya adalah \[(\frac {x}{y})^2\] Tampilannya tentu saja kurang menarik.

Logaritma, Limit dan Trigonometri


Penulisan perintah untuk menghasilkan tampilan logaritma, limit dan trigonometri menggunakan kode perintah \log, \lim, \sin, \cos dan \tan. Misalnya \log_b a, \lim_{x \to 0} f(x), \sin x, \cos x dan \tan x, hasilnya adalah \(\displaystyle \log_b a,\) \(\displaystyle \lim_{x \to 0} f(x),\) \(\sin x,\) \(\cos x\) dan \(\tan x.\)

Operator Besar (Sigma dan Pi)


Operator besar yang paling sering digunakan dalam matematika adalah Sigma dan Pi. Kode yang digunakan untuk sigma adalah \sum, sedangkan untuk pi adalah \prod. Contohnya adalah \sum \limits_{i=1}^{n} {x_i} dan \prod\limits_{i=1}^n{x_i}, hasilnya adalah \[\sum \limits_{i=1}^{n} {x_i} \text{ dan } \prod \limits_{i=1}^n{x_i}\]

Rumus di dalam Kotak


Rumus di dalam kotak bisa dibuat dengan menambahkan kode \boxed. Misalnya \boxed {\bar x = \frac{1}{n} \sum \limits_{i=1}^{n} {x_i}}, hasilnya adalah \[\boxed {\bar x = \frac{1}{n} \sum \limits_{i=1}^{n} {x_i}} \]

Persamaan


Adakalanya pada persamaan diperlukan kesejajaran secara vertikal pada tanda sama dengan (=). Untuk itu kita memerlukan kode seperti berikut ini.

\begin{aligned}
   &=   \\
   &=   \\
   &=
\end{aligned}

Contohnya penulisannya adalah

\begin{aligned}
  \lim_{x \to \infty} \left(1+ \frac{1}{x} \right )^x &= e \\
  \lim_{x \to 0 } \left(1+x \right)^{\frac {1}{x}} &= e \\
  \lim_{x \to \infty} \left(1+ \frac{a}{x} \right )^{bx} &= e^{ab} \\
  \lim_{x \to 0 } \left(1+ax \right)^{\frac {b}{x}} &= e^{ab}
\end{aligned}

Hasilnya adalah \[\begin{aligned} \lim_{x \to \infty} \left(1+ \frac{1}{x} \right )^x &= e \\ \lim_{x \to 0 } \left(1+x \right)^{\frac {1}{x}} &= e \\ \lim_{x \to \infty} \left(1+ \frac{a}{x} \right )^{bx} &= e^{ab} \\ \lim_{x \to 0 } \left(1+ax \right)^{\frac {b}{x}} &= e^{ab} \end{aligned}\] Contoh lainnya adalah

\begin{aligned}
  \log_b (x) &= \log _b \left( c \right)\log _c \left( x \right) \\ 
             &= \frac{{\log _c \left( x \right)}}{{\log _c \left( b \right)}} \end{aligned}

Hasilnya adalah \[\begin{aligned} \log _b \left( x \right) &= \log _b \left( c \right)\log _c \left( x \right) \\ &= \frac{{\log _c \left( x \right)}}{{\log _c \left( b \right)}} \end{aligned}\]

Fungsi


Berikut ini adalah contoh kode penulisan untuk fungsi

f(x;\lambda,k)=
\begin{cases}
  \frac{k}{\lambda} \left(\frac{x}{\lambda}\right)^{k-1}e^{-(x/\lambda)^{k}} &; x\geq 0 ,\\
  0 &; x<0,
\end{cases}

Hasilnya adalah \[f(x;\lambda,k) = \begin{cases} \frac{k}{\lambda}\left(\frac{x}{\lambda}\right)^{k-1}e^{-(x/\lambda)^{k}} &; x\geq 0 ,\\ 0 &; x<0, \end{cases}\]

Vektor dan Matriks


Berikut ini contoh penulisan kode untuk membuat vektor dan matriks. Contoh penulisan vektor adalah

\mathbf{y}= \left(\begin{matrix}
  y_1 \\
  y_2 \\
  \vdots \\
  y_n \\
\end{matrix} \right)

Hasilnya adalah \[\mathbf{y}=\left( \begin{matrix} y_1 \\ y_2 \\ \vdots \\ y_n \\ \end{matrix} \right)\] Contoh penulisan untuk matriks adalah

\mathbf{X}=\left( \begin{matrix}
  1 & x_{11} & x_{12} & \hdots & x_{1p}  \\
  1 & x_{21} & x_{22} & \hdots & x_{2p}  \\
  \vdots & \vdots & \vdots & \ddots & \vdots \\
  1 & x_{n1} & x_{n2} & \hdots & x_{np}  \\
\end{matrix} \right)

Hasilnya adalah \[\mathbf{X}=\left( \begin{matrix} 1 & x_{11} & x_{12} & \cdots & x_{1p} \\ 1 & x_{21} & x_{22} & \cdots & x_{2p} \\ \vdots & \vdots & \vdots & \ddots & \vdots \\ 1 & x_{n1} & x_{n2} & \cdots & x_{np} \\ \end{matrix} \right)\]

CodeCogs - An Open Source Scientific Library