PlusMagi's Blog By Pitt Phunsanit Books,Web,WordPress ปลั๊กอิน WordPress สำหรับเขียนสมการคณิตศาสตร์ด้วย KaTeX และ MathJax

ปลั๊กอิน WordPress สำหรับเขียนสมการคณิตศาสตร์ด้วย KaTeX และ MathJax

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

การใช้ภาพตัดแปะมักส่งผลเสียต่อความเร็วหน้าเว็บและ SEO ทางออกมาตรฐานสากลคือการใช้ LaTeX Syntax แล้วแปลงผลผ่านเอนจินยอดนิยมอย่าง MathJax หรือ KaTeX ซึ่งปัจจุบันมีปลั๊กอิน WordPress ให้เลือกใช้งานตามความเหมาะสม


KaTeX vs MathJax: เลือกเทคโนโลยีไหนก่อนตัดสินใจ?

  • KaTeX (พัฒนาโดย Khan Academy): ออกแบบมาเพื่อเน้น ความเร็วสูงสุด (Performance) การเรนเดอร์ทำได้รวดเร็วมาก ไม่เกิดอาการหน้ากระตุกหรือข้อความเด้ง (Layout Shift) แต่สัญลักษณ์หรือคำสั่งเฉพาะทางบางอย่างของ LaTeX อาจยังไม่ครอบคลุมเท่า MathJax
  • MathJax: เป็นมาตรฐานดั้งเดิมที่ รองรับไวยากรณ์ LaTeX ได้สมบูรณ์แบบที่สุด มีฟังก์ชันการเข้าถึง (Accessibility) รองรับการอ่านสูตรสำหรับผู้พิการทางสายตา แต่ขนาดไฟล์สคริปต์ใหญ่กว่า ทำให้ใช้เวลาประมวลผลบนเบราว์เซอร์มากกว่า KaTeX เล็กน้อย

3 ปลั๊กอิน WordPress แนะนำ


KaTeX (โดย Tom Churchman)

หากใช้ Gutenberg (Block Editor) เป็นหลัก ปลั๊กอินตัวนี้คือตัวเลือกที่ตอบโจทย์ที่สุด

  • จุดเด่น: มี Block เฉพาะของ KaTeX ให้ลากวาง พิมพ์สมการแล้วเห็นพรีวิวแบบ Real-time ทันทีในหน้า Editor โดยไม่ต้องสลับไปดูหน้าพรีวิวเว็บ
  • วิธีใช้งาน:
    • ใช้ผ่าน KaTeX Block โดยตรง
    • ใช้ Shortcode [katex]x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}[/katex] สำหรับพื้นที่ที่ไม่มีบล็อก
  • เหมาะสำหรับ: เว็บไซต์ที่เน้นคะแนน Core Web Vitals และชอบพิมพ์งานผ่าน Block Editor

Simple Mathjax

ตัวเลือกสำหรับคนที่ต้องการความเรียบง่ายระดับ “ติดตั้งแล้วพิมพ์ได้เลย”

  • จุดเด่น: ไม่ต้องตั้งค่าระบบให้ยุ่งยาก เพียงแค่เปิดใช้งาน ปลั๊กอินจะแปลงสัญลักษณ์ดอลลาร์ซายน์ ($) ให้กลายเป็นสูตรคณิตศาสตร์ทันทีเหมือนเขียน LaTeX ปกติ
  • วิธีใช้งาน:
    • เขียนในบรรทัด (Inline): $E = mc^2$
    • เขียนแยกบรรทัดกึ่งกลาง (Display Mode): $$\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$
  • เหมาะสำหรับ: ผู้ที่มีเอกสาร LaTeX อยู่แล้วและต้องการคัดลอกข้อความมาวางใน WordPress ได้ทันทีโดยไม่ต้องแก้แท็ก

MathJax-LaTeX

ปลั๊กอินระดับคลาสสิกที่ได้รับความนิยมยาวนาน เหมาะกับผู้ดูแลเว็บที่ต้องการควบคุมการโหลดสคริปต์

  • จุดเด่น: รองรับทั้งการโหลดสคริปต์ผ่าน CDN สาธารณะ และการโฮสต์ไฟล์ไลบรารีไว้บนเซิร์ฟเวอร์ของตัวเอง เพื่อหลีกเลี่ยงปัญหา CDN ภายนอกล่ม
  • วิธีใช้งาน: สามารถตั้งค่าให้ทำงานทั้งเว็บ หรือกำหนดให้โหลดสคริปต์เฉพาะบทความที่มีการใส่ Shortcode [mathjax] เพื่อประหยัด Bandwidth ของหน้าเว็บอื่นที่ไม่มีสูตร
  • เหมาะสำหรับ: เว็บไซต์ขนาดใหญ่ที่มีบทความผสมกันระหว่างบทความทั่วไปและบทความวิชาการ

ตารางเปรียบเทียบเพื่อการตัดสินใจ

คุณสมบัติKaTeX (Tom Churchman)Simple MathjaxMathJax-LaTeX
ความเร็วในการประมวลผลเร็วมากปานกลางปานกลาง
การรองรับ LaTeX ขั้นสูงปานกลาง – สูงสูงมากสูงมาก
Gutenberg Blockมีบล็อกพร้อม Live Previewไม่มี (พิมพ์ลงใน Text ได้เลย)ไม่มี
รูปแบบการพิมพ์ที่รองรับBlock / Shortcode$ ... $ และ $$ ... $$Shortcode / MathJax Syntax

หากเน้นความเร็ว โหลดไว ไม่หน่วงหน้าเว็บ และใช้งาน Gutenberg เป็นประจำ แนะนำให้เริ่มต้นด้วย KaTeX แต่ถ้าต้องการความสมบูรณ์ของไวยากรณ์ หรือจำเป็นต้องยกชุดโค้ด LaTeX จากงานวิจัยมาวางตรง ๆ โดยใช้เครื่องหมาย $...$ แนะนำให้เลือกใช้ Simple Mathjax จะสะดวกต่อการจัดการเนื้อหาที่สุด


อ่านเพิ่มเติม