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

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

MathJaX กับภาษาไทย

ปัญหาภาษาไทยและวิธีการแก้ไขจากเวอ์ชัน 2.4 จะไม่สามารถนำมาใช้กับเวอร์ชัน 3.2 ได้ เพราะดีไซน์และโครงสร้างโค้ดเปลี่ยนไปอย่างสิ้นเชิง แต่ก็สามารถแก้ไขผ่าน option renderActions ดังนี้

window.MathJax = {
	...
	options: {
		renderActions: {
			updateThaiTex: [9, function (doc) {
				if (typeof this.initThaiTex == 'undefined') {
					this.parseTextNodeUnder = function (node, option) {
						for (let childNode = node.firstChild; childNode != null; childNode = childNode.nextSibling) {
							if (childNode.nodeType == Node.ELEMENT_NODE && childNode.classList.contains('tex2math_ignore'))
									continue;

							if (childNode.nodeType == Node.TEXT_NODE) {
								for (let regexTex of option.regexTexArray) {
									childNode.textContent = childNode.textContent.replace(regexTex, function(match, tex_begin, tex_content, tex_end) {
										// Fix Thai Language
										tex_content = tex_content.replace(option.regexThaiCharacter, function(match, has_textcmd_before, thai_content) {
											return has_textcmd_before ? match: "\\text{" + thai_content + "}";
										});

										return tex_begin + tex_content + tex_end;
									});
								}
							}
							else if (childNode.nodeType == Node.ELEMENT_NODE)
								this.parseTextNodeUnder(childNode, option);
						}
					};

					let option = {
						"regexTexArray": [
							/(\\\[)(.+?)(\\\])/gs,
							/(\\\()(.+?)(\\\))/gs,
							/(\$\$)(.+?)(\$\$)/gs,
							/(\$)(.+?)(\$)/gs
						],
						"regexThaiCharacter": /(\\text(?:rm)?\{[^}]*)?([\u0E00-\u0E7F]+)/g
					};

					this.parseTextNodeUnder(document.body, option);
				}
				this.initThaiTex = true;
			}, '']
		}
	}
	...
}
						

สำหรับ tex2math_ignore เป็นชื่อ class ที่ต้องการให้ยกเว้นการแสดงผลเป็น LaTeX หากมีการกำหนด option ignoreHtmlClass จะต้องนำมาใส่ในโค้ดส่วนนี้ด้วย

ตัวอย่างผลลัพธ์ที่ได้ เมื่อเราเขียนคำสั่ง LaTeX เป็น \frac{พื้นที่สามเหลี่ยม}{พื้นที่สี่เหลี่ยม}

\[ \frac{พื้นที่สามเหลี่ยม}{พื้นที่สี่เหลี่ยม} \]

การแสดงผลบนอุปกรณ์พกพาขนาดเล็ก

อีกแนวทางหนึ่งในการแก้ปัญหาการแสดงผลบนอุปกรณ์พกพาขนาดเล็ก สมการคณิตศาสตร์ยาวเกิน แทนที่จะใช้วิธีการตัดขึ้นบรรทัดใหม่ ซึ่งอาจทำให้ความหมายเปลี่ยนไป สามารถใช้วิธีการเพิ่ม Scrollbar ด้วยโค้ด css ดังนี้

.MathJax_SVG_Display,
mjx-container[display="true"] {
	overflow:auto;
	padding-top:0.5rem;
	padding-bottom:0.25rem
}
						

ตัวอย่างผลลัพธ์ที่ได้ (ต้องทดสอบดูบนจอเล็ก หรือปรับขนาดหน้าต่างบราวเซอร์ ให้มีความกว้างน้อยกว่าความยาวของสมการ)

\[ \sum\limits_{k=1}^{n}{k^{10}} = \left(\frac{n(n+1)(2n+1)}{6}\right)\left(\frac{(n^2+n-1)(3n^6+9n^5+2n^4-11n^3+3n^2+10n-5)}{11}\right) \]