Trong các tài liệu kỹ thuật, tài liệu khoa học hoặc bài viết liên quan đến toán học, việc hiển thị công thức là điều rất cần thiết.
KaTeX là một thư viện JavaScript giúp render công thức toán học theo chuẩn LaTeX với tốc độ rất nhanh. Thư viện này được sử dụng rộng rãi trong:
  • Documentation kỹ thuật
  • Bài viết khoa học
  • Blog toán học
  • Tài liệu học thuật
Trong EzyPlatform, Markdown có thể xuất công thức dưới dạng code block, và chúng ta sẽ dùng KaTeX để chuyển nội dung này thành công thức hiển thị.

Thêm thư viện KaTeX vào trang

Trước tiên, bạn cần include các file cần thiết của KaTeX.

Thêm CSS vào thẻ <head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.33/dist/katex.min.css">
CSS này giúp KaTeX hiển thị công thức với định dạng đúng.

Thêm JavaScript vào cuối thẻ <body>

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.33/dist/katex.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var formulaBlocks = document.querySelectorAll(".source-formula");

        formulaBlocks.forEach((pre) => {
            var formula = pre.textContent.trim();

            try {
                katex.render(formula, pre, {
                    throwOnError: false,
                    displayMode: true
                });
            } catch (e) {
                console.error("KaTeX render error:", e);
            }
        });
    });
</script>
Đoạn script này sẽ:
  1. Chờ trang web load xong (DOMContentLoaded)
  2. Tìm tất cả các block .source-formula
  3. Lấy nội dung công thức bên trong
  4. Dùng katex.render() để chuyển LaTeX thành HTML

Cách viết công thức trong Markdown

Sau khi đã tích hợp KaTeX, bạn có thể viết công thức toán học trong Markdown bằng code block formula.
Ví dụ:
```formula
\\frac{a+b}{c}
```
Sau khi render, KaTeX sẽ hiển thị công thức tương đương:
[
frac{a+b}{c}
]
\\frac{a+b}{c}

Ví dụ một số công thức phổ biến

Phân số

```formula
\\frac{a+b}{c}
```

Căn bậc hai

```formula
\\sqrt{a^2 + b^2}
```

Tổng sigma

```formula
\\sum_{i=1}^{n} i
```

Tích phân

```formula
\\int_0^1 x^2 dx
```

Cách EzyPlatform xử lý Formula Markdown

Tương tự Mermaid, Markdown engine của EzyPlatform không tự động render công thức toán học.
Thay vào đó, nó tạo HTML dạng:
<div class="source-formula">
    frac{a+b}{c}
</div>
Script KaTeX sẽ tìm các block .source-formula và render chúng thành HTML math expression.

Best Practices

Khi sử dụng KaTeX trong EzyPlatform:
  • Luôn viết công thức trong block formula
  • Escape ký tự \ bằng \
  • Chỉ render sau khi DOM load xong
  • Tắt throwOnError để tránh lỗi làm hỏng trang

Tổng kết

Bằng cách tích hợp KaTeX, EzyPlatform có thể hỗ trợ hiển thị công thức toán học trong Markdown một cách hiệu quả.
Quy trình tích hợp gồm:
  1. Include CSS của KaTeX trong <head>
  2. Include JavaScript của KaTeX
  3. Render các block .source-formula
  4. Viết công thức bằng LaTeX trong Markdown
Giải pháp này giúp bạn dễ dàng viết:
  • tài liệu toán học
  • bài viết khoa học
  • documentation kỹ thuật
  • tutorial lập trình
ngay trong hệ thống Markdown của EzyPlatform.