บทความ/จัดพิมพ์ โดย: นาย เจษฏา กานต์ประชา
\[ \sum_{n=1}^\infty \frac{1}{n^6+1} = \frac{\pi}{6}\left( \coth\pi + \frac{\sinh\pi + \sqrt 3\sin\pi\sqrt 3}{\cosh\pi - \cos\pi\sqrt 3}\right) - \frac{1}{2} \]คิดว่าหลายคนในที่นี้น่าจะอยากสร้างเว็บไซต์ของกลุ่มหรือส่วนตัว ซึ่งสามารถแสดงผลสมการคณิตศาสตร์ได้เหมือนกับเว็บแห่งนี้ (ตัวอย่างสมการด้านบน) วิธีที่ผมแนะนำคือใช้ MathJaX ซึ่งเป็นชุดคำสั่ง Javascript สำหรับแสดงผลสมการคณิตศาสตร์บนเครื่องของผู้เข้าชมเว็บไซต์
ข้อดีของวิธีนี้คือ ไม่ต้องไปยุ่งยากกับการติดตั้ง LaTeX บน Hosting Server ซึ่งโดยทั่วไปจะมีค่าใช้จ่ายสูงมาก (หากต้องการติดตั้งโปรแกรมต่างๆได้เอง) นอกจากนี้ยังไม่เปลืองเนื้อที่สำหรับเก็บไฟล์รูปสมการคณิตศาสตร์ และไม่เป็นภาระกับ Hosting Server มากเกินไป ไม่จำเป็นต้องเช่า Hosting Server ราคาแพง ใช้ราคาพื้นฐานก็เพียงพอแล้ว
เราสามารถเรียกใช้ชุดคำสั่ง MathJaX ได้ 2 วิธีคือ
วิธีนี้เรียบง่ายที่สุด เพราะเราไม่จำเป็นต้องเก็บชุดคำสั่ง Javascript ไว้บน Server ของเราเอง และเมื่อทางผู้พัฒนาแก้ไขปรับปรุงชุดคำสั่ง MathJax เราก็จะได้ชุดคำสั่งตัวล่าสุดใช้งานทันที โดยไม่ต้องไปแก้ไขอะไรทั้งสิ้น นอกจากนั้นชุดคำสั่งเหล่านี้จะวางกระจายไว้ตาม Server ต่างๆทั่วโลก เพื่อให้แน่ใจว่าทุกคนทั่วโลกไม่เสียเวลาโหลดชุดคำสั่งเหล่านี้นานเกินไป :)
วิธีเรียกใช้ ให้เพิ่มคำสั่งโหลดสคริปต์ไปยัง MathJaX CDN บนหน้าเว็บไซต์ที่ต้องการแสดงผล ในส่วนของ <head> ตัวอย่างเช่น
<head> ... <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> ... </head>
วิธีนี้เราต้องไปดาวน์โหลดชุดคำสั่ง MathJaX จากเว็บไซต์ผู้พัฒนามาติดตั้งบน Hosting Server ของเราเอง อาจจะยุ่งยากกว่าเล็กน้อย แต่จะได้ความเป็นอิสระมากกว่า เพราะเราเป็นผู้ควบคุมทุกอย่างเอง รวมถึงตอนอัพเดทเวอร์ชัน เราต้องทำเองทุกขั้นตอน
ขั้นตอนการเรียกใช้ผ่าน Hosting Server
<head> ... <script src="MathJax-2.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> ... </head>
เพียงเท่านี้เราก็สามารถแสดงสมการคณิตศาสตร์บนหน้าเว็บได้แล้ว โดย
สมการแบบ inline ให้เขียน LaTeX ข้างใน \( ... \) ตัวอย่างเช่น
\(\sum_{n=1}^\infty \frac{1}{n^6+1} = \frac{\pi}{6}\left( \coth\pi + \frac{\sinh\pi + \sqrt 3\sin\pi\sqrt 3}{\cosh\pi - \cos\pi\sqrt 3}\right) - \frac{1}{2}\)
จะได้ผลลัพธ์เป็น \(\sum_{n=1}^\infty \frac{1}{n^6+1} = \frac{\pi}{6}\left( \coth\pi + \frac{\sinh\pi + \sqrt 3\sin\pi\sqrt 3}{\cosh\pi - \cos\pi\sqrt 3}\right) - \frac{1}{2}\)
สมการแบบ display ให้เขียน LaTeX ข้างใน \[ ... \] ตัวอย่างเช่น
\[\sum_{n=1}^\infty \frac{1}{n^6+1} = \frac{\pi}{6}\left( \coth\pi + \frac{\sinh\pi + \sqrt 3\sin\pi\sqrt 3}{\cosh\pi - \cos\pi\sqrt 3}\right) - \frac{1}{2}\]
จะได้ผลลัพธ์เป็น \[ \sum_{n=1}^\infty \frac{1}{n^6+1} = \frac{\pi}{6}\left( \coth\pi + \frac{\sinh\pi + \sqrt 3\sin\pi\sqrt 3}{\cosh\pi - \cos\pi\sqrt 3}\right) - \frac{1}{2} \]
หากสังเกตคำสั่งเรียกใช้ MathJaX ข้างต้น จะพบว่าตอนท้ายของโค้ดเขียนว่า MathJax.js?config=TeX-AMS-MML_HTMLorMML มีความหมายว่า เรากำลังใช้การตั้งค่าจากไฟล์ config/TeX-AMS-MML_HTMLorMML.js โดยสามารถเขียนสมการในรูปแบบ LaTeX (รวมถึง Package AMS) หรือ MML และแสดงผลผ่านบราวเซอร์เป็น HTML หรือ MathML
นอกเหนือจากการตั้งค่าในรูปแบบดังกล่าวแล้ว MathJaX ยังได้เตรียม การตั้งค่าพื้นฐานอีกหลายแบบ (รูปแบบของชื่อการตั้งค่าคือ InputFormat_OutputFormat) ดังนี้
เราสามารถสร้างไฟล์ตั้งค่าแบบอื่นได้ ด้วยการเขียนไฟล์ชุดคำสั่ง Javascript เช่น Tex-AMS_SVGorHTML.js เอาไปวางภายใต้โฟลเดอร์ MathJaX-2.4/config เวลาเรียกใช้ก็เขียนเป็น MathJax-2.4/MathJax.js?config=Tex-AMS_SVGorHTML
Tex-AMS_SVGorHTML.js
MathJax.Hub.Config({ extensions: ["tex2jax.js","MathEvents.js","MathZoom.js","MathMenu.js","TeX/AMSmath.js","TeX/AMSsymbols.js"], jax: ["input/TeX","output/SVG","output/HTML-CSS"] }); MathJax.Ajax.loadComplete("[MathJax]/config/TeX-AMS_SVGorHTML.js");
สิ่งที่อยู่ภายในไฟล์ตั้งค่าคือ การตั้งค่า MathJaX แบบ inline ซึ่งจะกล่าวถึงต่อไป แล้วตามด้วยคำสั่ง MathJax.Ajax.loadComplete เพื่อบอก MathJaX ว่าดาวน์โหลดชุดคำสั่งของไฟล์ตั้งค่านี้สำเร็จแล้ว
เราสามารถตั้งค่า MathJaX อีกวิธีหนึ่งโดยไม่จำเป็นต้องสร้างไฟล์ตั้งค่า ด้วยการตั้งค่าบนหน้าเว็บ เรียกวิธีนี้ว่า inline ซึ่งจะมีพารามิเตอร์ต่างๆให้กำหนดมากมาย ลองศึกษาจากเอกสาร MathJaX Documentation ของทางผู้พัฒนา มีเขียนไว้ระดับหนึ่ง (มีเอกสารในรูปแบบ E-Book) หรือจะลองศึกษาจากไฟล์การตั้งค่าภายใต้โฟลเดอร์ MathJaX-2.4/unpacked/config ประกอบ
ตัวอย่างการเรียกใช้ MathJaX และตั้งค่าแบบ inline ที่ให้ผลลัพธ์เหมือนกับการตั้งค่าผ่านไฟล์ตั้งค่า TeX-AMS-MML_HTMLorMML
<head> ... <script type="text/x-mathjax-config"> MathJax.Hub.Config({ config: ["MMLorHTML.js"], extensions: ["tex2jax.js","mml2jax.js","MathEvents.js","MathZoom.js","MathMenu.js","toMathML.js","TeX/noErrors.js","TeX/noUndefined.js","TeX/AMSmath.js","TeX/AMSsymbols.js"], jax: ["input/TeX","input/MathML","output/HTML-CSS","output/NativeMML"] }); </script> <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js"></script> ... </head>
จะสังเกตเห็นว่าคำสั่งเรียกใช้ MathJaX ไม่ได้อ้างถึงไฟล์ตั้งค่าใดๆเลย (ไม่มีส่วนที่เป็นconfig=...) แต่เราก็สามารถเรียกใช้ทั้งค่าการตั้งค่าแบบ inline พร้อมกับใช้ไฟล์ตั้งค่าได้ โดยจะใช้ค่าที่ได้จากไฟล์ตั้งค่าเป็นตัวตั้งต้น แล้วเขียนทับด้วยค่าแบบ inline ยกตัวอย่างเช่น เราใช้ไฟล์ตั้งค่า TeX-AMS-MML_HTMLorMML เป็นตัวตั้งต้น แล้วตั้งค่าแบบ inline ทับลงไป กำหนด inline delimiter เพิ่มเติมคือ $ ... $
<head> ... <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ [’$’,’$’], ["\\(","\\)"] ], } }); </script> <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> ... </head>
มีข้อควรระวังอย่างหนึ่งคือ หากไฟล์การตั้งค่าไม่ได้เก็บไว้ภายใต้โฟลเดอร์ config เมื่อเทียบกับตัว MathJax.js ยกตัวอย่างเช่น เราอาจจะเรียกใช้ชุดคำสั่ง MathJaX CDN (http://cdn.mathjax.org/mathjax/latest/MathJax.js) แต่ใช้ไฟล์การตั้งค่า http://www.myhost.com/mathjax/config/Tex-AMS_SVGorHTML.js บน Host ของเราเอง ในกรณีนี้ ให้อ้างอิงไฟล์ตั้งค่ามายัง Host ของเราด้วย (ไม่ต้องใส่ .js) เช่น<head> ... <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=http://www.myhost.com/mathjax/config/Tex-AMS_SVGorHTML"></script> ... </head>