Bloggang.com : Que :-> -

การแสดงผลสมการคณิตศาสตร์บน browser ด้วยสคริปของ mathjax

ถ้าต้องการแสดงผลสมการคณิตศาสตร์ให้บนเว็บ หรือก็คือการแสดงผลบนเว็บบราวน์เซอร์นั้น โดยปกติถ้าเป็นสมการที่ไม่ซับซ้อน เราก็จะพิมพ์ลงไปตรง ๆ เลย เช่น a=b+c หรือ f(x)=4x²+5x+6 เป็นต้น แต่ถ้าหากสมการมีความซับซ้อนสูงและเราต้องการให้สมการนั้นออกมาสวยงาม เราก็อาจทำได้โดยทำให้สมการให้เป็นรูปภาพและแทรกรูปภาพลงไปแทน

แต่ในบล๊อกนี้จะเสนออีกวิธีหนึ่ง ซ๊่งสามารถทำได้โดยใช้วิธีการพิมพ์สมการของ LaTeX และให้มันแสดงผลบน browser โดยใช้ script ของ mathjax ซึ่งจะให้ผลที่สวยงามเช่น $x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}$ เป็นต้น ... ในส่วนของการใช้ LaTeX เพื่อพิมพ์สมการนั้นมีรายละเอียดพอสมควรและถือเป็นพื้นฐานของคนที่ใช้ LaTeX อยู่แล้ว ไม่ขอพูดถึงนะครับ ... จะขอเสนอเฉพาะสคริปของ mathjax ที่แทรกลงใน head tag ของ HTML โดยสคริปคือ

MathJax.Hub.Config({

HTML: ["input/TeX","output/HTML-CSS"],

TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],

equationNumbers: { autoNumber: "AMS" } },

extensions: ["tex2jax.js"],

jax: ["input/TeX","output/HTML-CSS"],

tex2jax: {inlineMath: [["$\$$","$\$$"], ["\$","\$"]],

displayMath: [["$\$\$$","$\$\$$"], ["\\[","\\]"]],

processEscapes: true },

"HTML-CSS": { availableFonts: ["TeX"],

linebreaks: { automatic: true } }

});

</script>

ตัวอย่างสมการ

1. Inline Equation. $a=b+c$, $f(x)=\int_a^bK(x,t)\psi(t)dt$

2. Displayed Equation

$$\sum\limits_{i=1}^n i = \frac{n(n+1)}{2}$$

3. Numbered Equations

\begin{equation}\tag{1}\nabla \times E = -\frac{\partial B}{\partial t}\end{equation}\begin{equation}\tag{2}\nabla \times H = \frac{\partial D}{\partial t} + J\end{equation}

Create Date : 03 มกราคม 2557
Last Update : 3 มกราคม 2557 15:30:52 น.
Counter : 1571 Pageviews.

2 comment