p a r a d o k s: Tutorial MathJax Untuk Blogger

Untuk menuliskan persamaan Matematika dalam website atau blog Anda, Anda dapat menggunakan bantuan MathJax. Mathjax bekerja dengan menerjemahkan input berbasis $\TeX{}$ menjadi Javascript yang kemudian ditampilkan oleh peramban Anda sebagai persamaan matematika yang apik. Pada postingan kali ini, saya akan sedikit membahas cara mengintegrasikan MathJax dengan blog berplatform Blogger.

Mula-mula, Anda perlu memasang konfigurasi MathJax ke dalam template blog Anda. Untuk mengedit template, klik menu "Tema" pada dashboard akun blogger Anda, kemudian plih "Edit HTML" pada menu drop down. Selanjutnya, salin dan tempel kode berikut ini setelah tag <head> dan sebelum segmen "skin" (sederhananya, tempel saja tepat di bawah tag <head>).

Setelah itu, klik "Simpan Tema". Sekarang, Anda telah dapat menampilkan persamaan matematika di blog Anda. Untuk menuliskan kode persamaan matematika, selalu lakukan dalam mode edit "HTML". Anjuran dari saya, kalau Anda selalu menulis dalam mode "Compose", mulailah membiasakan diri untuk menulis dalam mode "HTML" untuk ragam tulisan apapun. Tulisan Anda akan tampak lebih rapi dan konsisten.

Untuk menulis persamaan matematika dalam baris kalimat, Anda harus menuliskan kode $\TeX{}$ persamaan diantara tanda $ dan $. Semisal $\nabla^2 \Phi = 4 \pi G \rho$ akan ditampilkan sebagai $\nabla^2 \Phi = 4 \pi G \rho$. Adapun untuk menuliskan persamaan dalam baris khusus, tuliskan kode persamaan Anda di antara tag $$ dan $$. Berikut ini contohnya.

yang akan ditampilkan menjadi:

$$\sin^2(x) + \cos^2(x) = 1$$

Untuk menuliskan persamaan dengan fitur yang lebih lengkap, gunakan kode seperti berikut.

akan ditampilkan sebagai,

\begin{align} F_{12} = -F_{21} = \frac{G m_1 m_2}{r^2} \label{F1} \end{align}

Ingat bahwa untuk menulis subskrip atau superskrip dengan lebih dari satu karakter, Anda harus menuliskannya dalam kurung kurawal seperti "U_{rad}" atau "T^{16}". Dengan menggunakan label, Anda dapat memberikan nomor referensi yang dapat ditautkan pada persamaan Anda semisal (\ref{F1}). Untuk melakukannya, tuliskan (\ref{...}) dan ganti "..." menjadi label dari persamaan yang dimaksud. Perhatikan agar tidak memberikan label yang identik untuk dua atau lebih persamaan. Bila Anda tidak ingin memberikan nomor referensi pada persamaan, ganti elemen (\label{...}) dengan (\nonumber) tepat setelah persamaan. Bila ingin menuliskan set persamaan yang terdiri atas dua baris atau lebih, gunakan \\<br> untuk membuat baris baru. Untuk lebih jelasnya, perhatikan contoh berikut.

Hasilnya,
\begin{align} \int_{0}^{V_s} P \: dV &= \int_{0}^{\mathcal{N}} \frac{\rho kT}{nm} \: dN = \mathcal{N} kT \nonumber \\
&= \frac{2}{3} U_{\mathrm{in}} \label{p5} \end{align}

Pada contoh di atas, gunakan "&=" alih-alih "=" untuk membuat tanda "=" pada setiap baris sejajar. Kode "\mathcal{}" digunakan untuk menuliskan huruf bergaya/kaligrafi (script) sedangkan kode "\mathrm{}" digunakan untuk menuliskan huruf tegak. Beberapa variasi stye lainnya diberikan dalam tabel berikut.

Fungsi	Sintaks	Tampilan
math bold	$\mathbf{A}$	$\mathbf{A}$
math blackboard	$\mathbb{Z}$	$\mathbb{Z}$
math fraktur	$\mathfrak{R}$	$\mathfrak{R}$
vector	$\vec{F}$	$\vec{F}$
hat	$\hat{r}$	$\hat{r}$
overline	$\overline{PQ}$	$\overline{PQ}$
tilde	$\tilde{x}$	$\tilde{x}$
dot	$\dot{x}$	$\dot{x}$
double dot	$\ddot{x}$	$\ddot{x}$

Jika Anda masih belum akrab dengan menuliskan persamaan matematika dalam format $\TeX{}$, Anda dapat mempelajarinya dengan berlatih di https://www.codecogs.com/latex/eqneditor.php. Di sana, Anda dapat menulis persamaan matematika dengan alat UI dan melihat sintaks Latex untuk persamaan yang Anda tulis. Sebenarnya, equation pada MS Word juga mendukung format penulisan serupa dan langsung diterjemahkan setelah Anda memencet spasi. Untuk kemudahan, beberapa sintaks yang sering digunakan saya cantumkan dalam spoiler di bawah ini.

Contoh Sintaks:

Tanda Kurung dan Matriks

Sintaks	Tampilan
$\left ( \frac{A}{B} \right )$	$\left ( \frac{A}{B} \right )$
$\left [ \frac{A}{B} \right ]$	$\left [ \frac{A}{B} \right ]$
$\left \{ \frac{A}{B} \right \}$	$\left \{ \frac{A}{B} \right \}$
$\left \| \frac{A}{B} \right \|$	$\left \| \frac{A}{B} \right \|$
$\left \\| \frac{A}{B} \right \\|$	$\left \\| \frac{A}{B} \right \\|$
$\left [ 0, \infty \right )$	$\left [ 0, \infty \right )$
$\left. \frac{A}{B} \right \|$	$\left. \frac{A}{B} \right \|$
$\left \langle \Psi \| \Psi \right \rangle$	$\left \langle \Psi \| \Psi \right \rangle$
$$ A=\begin{pmatrix} a & b & c\\ d & e & f\\ g & h & i \end{pmatrix} $$	$$ A=\begin{pmatrix} a & b & c\\ d & e & f\\ g & h & i \end{pmatrix} $$
$$ x=\left\{\begin{matrix} 1 & ;\: i=j\\ 0 & ;\: i \neq j \end{matrix}\right. $$	$$ x=\left\{\begin{matrix} 1 & ;\: i=j\\ 0 & ;\: i \neq j \end{matrix}\right. $$

Untuk matriks dalam kurung siku, ganti tag "{pmatrix}" menjadi "{bmatrix}"; untuk matriks dalam kurung kurawal ganti menjadi "{Bmatrix}"; untuk matriks dalam kurung mutlak ganti menjadi "{vmatrix}"; dan untuk matriks dalam kurung mutlak ganda menjadi "{Vmatrix}".

Karakter Khusus

Sintaks	Tampilan	Sintaks	Tampilan	Sintaks	Tampilan
$\: $	$\: $	$\rightarrow$	$\rightarrow$	$\Rightarrow$	$\Rightarrow$
$\longrightarrow$	$\longrightarrow$	$^\circ$	$^\circ$	$\times$	$\times$
$\bullet$	$\bullet$	$\bigtriangleup$	$\bigtriangleup$	$\cdot$	$\cdot$
$\cdots$	$\cdots$	$\pm$	$\pm$	$\mp$	$\mp$
$\angle$	$\angle$	$\perp$	$\perp$	$\parallel$	$\parallel$
$\approx$	$\approx$	$\equiv$	$\equiv$	$\neq$	$\neq$
$\leq$	$\leq$	$\geq$	$\geq$	$\exists$	$\exists$
$\forall$	$\forall$	$\cap$	$\cap$	$\cup$	$\cup$
$\in$	$\in$	$\varnothing$	$\varnothing$	$\partial$	$\partial$
$\nabla$	$\nabla$	$\infty$	$\infty$	$\sum_{}^{}$	$\sum_{}^{}$
$\prod_{}^{}$	$\prod_{}^{}$	$\int_{}^{}$	$\int_{}^{}$	$\lim_{x \to a}$	$\lim_{x \to a}$

Selanjutnya, jika Anda telah selesai menulis dan mengirim postingan, ceklah tampilan blog Anda melalui peramban pada perangkat desktop dan seluler. Bila persamaan matematikanya tidak muncul pada perangkat seluler, masuk ke pengaturan tema Blogger. Pilih tema seluler "Khusus" dan simpan pengaturan. Anda bisa juga menonaktifkan tema seluler sehingga tampilan blog Anda di perangkat seluler tetap sama seperti pada perangkat desktop.

Referensi:
https://www.mathjax.org/
http://holdenweb.blogspot.com/2011/11/blogging-mathematics.html
http://irrep.blogspot.com/2011/07/mathjax-in-blogger-ii.html

5 komentar:

Sunkar Gautama26 Juni 2018 pukul 15.24
$$\Gamma_{\mu\nu}^{\alpha} = \frac{1}{2} g^{\beta\alpha} \left ( \partial_{\mu} g_{\beta\nu} + \partial_{\nu} g_{\mu\beta} - \partial_{\beta} g_{\mu\nu} \right )$$
BalasHapus
Balasan
ika17 Juni 2019 pukul 15.02
Terima kasih...
BalasHapus
Balasan
ArRahim9 April 2020 pukul 23.30
Mantap gan...makasih n salam kenal.
setlah sy bc tulisan ini, saya jadi tau bedanya menggunakan tanda \[...\] dengan $....$. kemrn2 smpet bingung knp pada ketengah semua tulisan math nya...
BalasHapus
Balasan
BelajarMantul11 Juli 2020 pukul 16.06
mantep banget, jadi referensi seterusnya untuk blog saya. makasih!
BalasHapus
Balasan

Tambahkan komentar

Fungsi	Sintaks	Tampilan
math bold	\(\mathbf{A}\)	\(\mathbf{A}\)
math blackboard	\(\mathbb{Z}\)	\(\mathbb{Z}\)
math fraktur	\(\mathfrak{R}\)	\(\mathfrak{R}\)
vector	\(\vec{F}\)	\(\vec{F}\)
hat	\(\hat{r}\)	\(\hat{r}\)
overline	\(\overline{PQ}\)	\(\overline{PQ}\)
tilde	\(\tilde{x}\)	\(\tilde{x}\)
dot	\(\dot{x}\)	\(\dot{x}\)
double dot	\(\ddot{x}\)	\(\ddot{x}\)

Sintaks	Tampilan
\(\left ( \frac{A}{B} \right )\)	\(\left ( \frac{A}{B} \right )\)
\(\left [ \frac{A}{B} \right ]\)	\(\left [ \frac{A}{B} \right ]\)
\(\left \{ \frac{A}{B} \right \}\)	\(\left \{ \frac{A}{B} \right \}\)
\(\left \| \frac{A}{B} \right \|\)	\(\left \| \frac{A}{B} \right \|\)
\(\left \\| \frac{A}{B} \right \\|\)	\(\left \\| \frac{A}{B} \right \\|\)
\(\left [ 0, \infty \right )\)	\(\left [ 0, \infty \right )\)
\(\left. \frac{A}{B} \right \|\)	\(\left. \frac{A}{B} \right \|\)
\(\left \langle \Psi \| \Psi \right \rangle\)	\(\left \langle \Psi \| \Psi \right \rangle\)
$$ A=\begin{pmatrix} a & b & c\\ d & e & f\\ g & h & i \end{pmatrix} $$	$$ A=\begin{pmatrix} a & b & c\\ d & e & f\\ g & h & i \end{pmatrix} $$
$$ x=\left\{\begin{matrix} 1 & ;\: i=j\\ 0 & ;\: i \neq j \end{matrix}\right. $$	$$ x=\left\{\begin{matrix} 1 & ;\: i=j\\ 0 & ;\: i \neq j \end{matrix}\right. $$

Sintaks	Tampilan	Sintaks	Tampilan	Sintaks	Tampilan
\(\: \)	\(\: \)	\(\rightarrow\)	\(\rightarrow\)	\(\Rightarrow\)	\(\Rightarrow\)
\(\longrightarrow\)	\(\longrightarrow\)	\(^\circ\)	\(^\circ\)	\(\times\)	\(\times\)
\(\bullet\)	\(\bullet\)	\(\bigtriangleup\)	\(\bigtriangleup\)	\(\cdot\)	\(\cdot\)
\(\cdots\)	\(\cdots\)	\(\pm\)	\(\pm\)	\(\mp\)	\(\mp\)
\(\angle\)	\(\angle\)	\(\perp\)	\(\perp\)	\(\parallel\)	\(\parallel\)
\(\approx\)	\(\approx\)	\(\equiv\)	\(\equiv\)	\(\neq\)	\(\neq\)
\(\leq\)	\(\leq\)	\(\geq\)	\(\geq\)	\(\exists\)	\(\exists\)
\(\forall\)	\(\forall\)	\(\cap\)	\(\cap\)	\(\cup\)	\(\cup\)
\(\in\)	\(\in\)	\(\varnothing\)	\(\varnothing\)	\(\partial\)	\(\partial\)
\(\nabla\)	\(\nabla\)	\(\infty\)	\(\infty\)	\(\sum_{}^{}\)	\(\sum_{}^{}\)
\(\prod_{}^{}\)	\(\prod_{}^{}\)	\(\int_{}^{}\)	\(\int_{}^{}\)	\(\lim_{x \to a}\)	\(\lim_{x \to a}\)

p a r a d o k s

Laman

Selasa, 26 Juni 2018

Tutorial MathJax Untuk Blogger

5 komentar:

Daftar Bacaan Saya

Entri Populer Bulan Ini