Mathcenter Community


MathJaX ชุดคำสั่งสำหรับแสดงสมการคณิตศาสตร์บนเว็บ

บทความ/จัดพิมพ์ โดย: นาย เจษฏา กานต์ประชา


\[ \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

เราสามารถเรียกใช้ชุดคำสั่ง MathJaX ได้ 2 วิธีคือ

  1. เรียกใช้ผ่าน MathJaX CDN
  2. เรียกใช้บน Hosting Server ของเราเอง

1. เรียกใช้ผ่าน MathJaX CDN

วิธีนี้เรียบง่ายที่สุด เพราะเราไม่จำเป็นต้องเก็บชุดคำสั่ง 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>
						

2. เรียกใช้บน Hosting Server ของเราเอง

วิธีนี้เราต้องไปดาวน์โหลดชุดคำสั่ง MathJaX จากเว็บไซต์ผู้พัฒนามาติดตั้งบน Hosting Server ของเราเอง อาจจะยุ่งยากกว่าเล็กน้อย แต่จะได้ความเป็นอิสระมากกว่า เพราะเราเป็นผู้ควบคุมทุกอย่างเอง รวมถึงตอนอัพเดทเวอร์ชัน เราต้องทำเองทุกขั้นตอน

ขั้นตอนการเรียกใช้ผ่าน Hosting Server

  1. ดาวน์โหลด MathJaX ตัวล่าสุดจากหน้า Get MathJax สมมติว่าเราดาวน์โหลด MathJaX เวอร์ชัน 2.4 มาติดตั้ง
  2. Unzip ไฟล์ที่ดาวน์โหลดออกมา เราจะเห็นโฟลเดอร์และไฟล์มีหน้าตาประมาณนี้
    • MathJax-2.4
      • config
      • docs
      • extensions
      • ...
  3. Upload โฟลเดอร์ MathJax-2.4 ขึ้นไปไว้บน Hosting Server ขั้นตอนนี้จะใช้เวลานานหน่อย เพราะประกอบด้วยฟอนต์ไฟล์หลายหมื่นไฟล์
  4. ให้เพิ่มคำสั่งโหลดสคริปต์ไปยัง MathJaX บนหน้าเว็บไซต์ที่ต้องการแสดงผล ในส่วนของ <head> ตัวอย่างเช่น
    									<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 ข้างต้น จะพบว่าตอนท้ายของโค้ดเขียนว่า MathJax.js?config=TeX-AMS-MML_HTMLorMML มีความหมายว่า เรากำลังใช้การตั้งค่าจากไฟล์ config/TeX-AMS-MML_HTMLorMML.js โดยสามารถเขียนสมการในรูปแบบ LaTeX (รวมถึง Package AMS) หรือ MML และแสดงผลผ่านบราวเซอร์เป็น HTML หรือ MathML

นอกเหนือจากการตั้งค่าในรูปแบบดังกล่าวแล้ว MathJaX ยังได้เตรียม การตั้งค่าพื้นฐานอีกหลายแบบ (รูปแบบของชื่อการตั้งค่าคือ InputFormat_OutputFormat) ดังนี้

  • TeX-AMS_HTML
  • TeX-AMS-MML_HTMLorMML
  • TeX-AMS-MML_SVG
  • TeX-MML-AM_HTMLorMML

เราสามารถสร้างไฟล์ตั้งค่าแบบอื่นได้ ด้วยการเขียนไฟล์ชุดคำสั่ง 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 อีกวิธีหนึ่งโดยไม่จำเป็นต้องสร้างไฟล์ตั้งค่า ด้วยการตั้งค่าบนหน้าเว็บ เรียกวิธีนี้ว่า 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>