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

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


<script src='//cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>    
    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 : 824 Pageviews.

2 comments
  
ใน comment ก็ได้นะจ๊ะ
complex relative permittivity
\begin{equation}\tag{a}
\hat{\varepsilon}_r=\varepsilon_r - j \frac{\sigma}{\omega \varepsilon_0}
\end{equation}
โดย: Que :-> วันที่: 3 มกราคม 2557 เวลา:16:43:32 น.
  
เพิ่มเติม:

pantip ไม่รองรับเครื่องหมาย backslash \
ซึ่งจำเป็นต้องใช้สำหรับการพิมพ์ LaTeX
แก้โดยแทนเครื่องหมาย \ นี้ด้วย &#92;
โดย: Que :-> วันที่: 3 มกราคม 2557 เวลา:16:52:05 น.
ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
 *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

Que :->
Location :
  United States

[ดู Profile ทั้งหมด]
ให้ทิปเจ้าของ Blog [?]
 ฝากข้อความหลังไมค์
 Rss Feed
 Smember
 ผู้ติดตามบล็อก : 1 คน [?]



Group Blog