Hiển thị công thức toán học bằng Katex

Lịch sử ra đời: Từ TeX đến LaTeX

Vào cuối những năm 1970, Donald Knuth, một huyền thoại trong ngành khoa học máy tính, đã vô cùng thất vọng với chất lượng in ấn của các bản thảo cho bộ sách kinh điển của ông, "The Art of Computer Programming". Ông quyết định tự mình tạo ra một công cụ để giải quyết vấn đề này. Kết quả là TeX ra đời vào năm 1978.

TeX là một engine sắp chữ (typesetting engine) ở cấp độ thấp. Nó cực kỳ mạnh mẽ, cho phép người dùng kiểm soát vị trí của từng ký tự trên trang với độ chính xác tuyệt đối. Tuy nhiên, sức mạnh này đi kèm với sự phức tạp; việc sử dụng TeX trực tiếp đòi hỏi nhiều lệnh chi tiết và tỉ mỉ.

LaTeX: Giúp TeX thân thiện hơn

Nhận thấy hầu hết mọi người không cần đến mức độ kiểm soát chi tiết của TeX, vào đầu những năm 1980, Leslie Lamport đã phát triển LaTeX.

LaTeX không phải là một chương trình độc lập, mà là một tập hợp các macro (lệnh được định nghĩa sẵn) chạy trên nền của engine TeX. Thay vì yêu cầu người dùng chỉ định "hãy đặt ký tự này ở tọa độ X, Y", LaTeX cho phép họ tập trung vào cấu trúc của văn bản. Người dùng chỉ cần ra lệnh "đây là một chương", "đây là một tiêu đề", "đây là một phương trình", và LaTeX sẽ tự động dùng engine TeX để sắp xếp mọi thứ một cách hợp lý và đẹp mắt.

Dù đã có công thức viết bằng cú pháp LaTeX, nhưng làm thế nào để trình duyệt web có thể "hiểu" và hiển thị chúng một cách đẹp đẽ? Đây chính là lúc hai thư viện JavaScript mạnh mẽ nhất xuất hiện: MathJax và KaTeX

MathJax

Dự án MathJax được bắt đầu vào năm 2009, với vai trò là "người kế nhiệm" cho một thư viện định dạng toán học có trước đó là jsMath. Nó được sáng lập bởi ba tổ chức lớn:

• Hiệp hội Toán học Hoa Kỳ (American Mathematical Society - AMS)
• Design Science (công ty tạo ra MathType)
• Hiệp hội Toán học Công nghiệp và Ứng dụng (Society for Industrial and Applied Mathematics - SIAM)

Hiện tại, dự án được quản lý bởi Hiệp hội Toán học Hoa Kỳ và được hỗ trợ bởi rất nhiều nhà tài trợ uy tín khác như Viện Vật lý Hoa Kỳ và nền tảng hỏi đáp nổi tiếng Stack Exchange.

Katex

KaTeX cũng là một thư viện JavaScript mã nguồn mở để hiển thị toán học trên web, nhưng nó đặt trọng tâm đặc biệt vào hai yếu tố: tốc độ và sự dễ sử dụng.

Dự án được phát triển ban đầu bởi Khan Academy, một tổ chức giáo dục phi lợi nhuận nổi tiếng. Ngay sau khi ra mắt, KaTeX đã nhanh chóng gây được tiếng vang lớn và trở thành một trong những dự án thịnh hành nhất trên GitHub vào tháng 9 năm 2014.

Các đặc điểm nổi bật của KaTeX

Tốc độ cực nhanh: KaTeX render công thức một cách đồng bộ (synchronously) và không cần phải sắp xếp lại bố cục trang (reflow), giúp nó có tốc độ vượt trội so với MathJax.

Chất lượng in ấn: Giống như MathJax, bố cục của nó cũng dựa trên nền tảng TeX, đảm bảo các công thức hiển thị sắc nét và chuyên nghiệp.

Hoàn toàn độc lập (Self-contained): Nó không có bất kỳ thư viện phụ thuộc nào, giúp việc tích hợp và đóng gói vào các dự án web trở nên cực kỳ đơn giản.

Hỗ trợ render phía máy chủ (Server-side rendering): KaTeX có thể tạo ra HTML ngay trên server (ví dụ, dùng Node.js). Điều này cho phép gửi về trình duyệt một trang HTML tĩnh đã chứa sẵn công thức, giúp tăng tốc độ tải trang ban đầu.

Một điểm quan trọng cần lưu ý là KaTeX chỉ thực thi một tập hợp con các tính năng của LaTeX so với MathJax. Nó tập trung vào các lệnh và môi trường toán học phổ biến nhất để tối ưu hóa cho tốc độ. 

Tích hợp Katex vào website

Thêm thư viện Katex

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css" integrity="sha512-fHwaWebuwA7NSF5Qg/af4UeDx9XqUpYpOGgubo3yWu+b2IQR4UeQwbb42Ti7gVAjNtVoI/I9TEoYeu9omwcC6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js" integrity="sha512-LQNxIMR5rXv7o+b1l8+N1EZMfhG7iFZ9HhnbJkTp4zjNr5Wvst75AqUeFDxeRUa7l5vEDyUiAip//r+EFLLCyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/contrib/auto-render.min.js" integrity="sha512-iWiuBS5nt6r60fCz26Nd0Zqe0nbk1ZTIQbl3Kv7kYsX+yKMUFHzjaH2+AnM6vp2Xs+gNmaBAVWJjSmuPw76Efg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Khởi tạo Auto-Render

Tiếp theo, bạn cần một đoạn script nhỏ để ra lệnh cho KaTeX tự động tìm và render các công thức sau khi trang đã tải xong.

<script>
  // Wait for the page to be fully loaded
  document.addEventListener("DOMContentLoaded", function() {
    // Call the auto-render function on the entire page
    renderMathInElement(document.body, {
      // Define the delimiters KaTeX will look for
      delimiters: [
          {left: '$$', right: '$$', display: true},  // For block math
          {left: '$', right: '$', display: false},    // For inline math
          {left: '\\[', right: '\\]', display: true},
          {left: '\\(', right: '\\)', display: false}
      ]
    });
  });
</script>

Thử công thức

<p>
  When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
  \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
</p>

Kết quả:

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]

Tham khảo

Tex 

Latex 

Katex

Lời kết

Hi vọng qua bài viết này, bạn có thể tự tin tích hợp những công thức toán học đẹp mắt vào sản phẩm của mình.

Chúc các bạn thành công!