Tạo Custom BBcode toán học cho xenforo 2.3.x

Thứ bảy - 03/08/2024 11:44

Chỉnh sửa Template PAGE_CONTAINER:

a. Truy cập vào Admin Control Panel (ACP) của XenForo.

b. Điều hướng đến Appearance -> Templates.

c. Chọn template PAGE_CONTAINER.

d. Thêm các đường dẫn CDN cho KaTeX CSS và JS vào phần <head> của template:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>

Thêm Script Render KaTeX:

a. Trong cùng template PAGE_CONTAINER, thêm đoạn script sau vào cuối template, ngay trước thẻ đóng </body>:
<script>
document.addEventListener('DOMContentLoaded', function() {
var elements = document.querySelectorAll('.math-inline');
elements.forEach(function(el) {
try {
katex.render(el.textContent, el, {
throwOnError: false,
displayMode: false
});
} catch (e) {
console.error(e);
}
});
});
</script>

Chỉnh sửa Custom BBCode:

a. Truy cập vào Admin Control Panel (ACP) của XenForo.

b. Điều hướng đến Content -> BB code.

c. Tìm và chỉnh sửa BBCode bạn đã tạo với tag imath.

d. Đảm bảo cấu hình như sau:

Title: Inline Math
BB code tag: imath
BB code usage: [imath]{text}[/imath]
HTML replacement: <span class="math-inline">{text}</span>

Kiểm tra và Đăng Bài:

a. Đăng một bài viết mới sử dụng BBCode [imath]...[/imath]. Ví dụ:
```
Đây là một công thức toán học inline: [imath]E = mc^2[/imath].
```
Kiểm tra Console Trình Duyệt:
- Mở Developer Tools của trình duyệt (F12) và kiểm tra console để xem có lỗi JavaScript nào không.
- Kiểm tra xem file CSS và JS của KaTeX có được tải đúng cách từ CDN không.