- Xu
- 768,479,597


Trong diễn đàn XenForo, việc hiển thị công thức toán học thường gặp khó khăn nếu chỉ dùng định dạng văn bản thông thường. Chính vì vậy, việc tạo Custom BBcode toán học trở thành giải pháp hiệu quả để các công thức được trình bày rõ ràng, đẹp mắt và dễ đọc hơn. Với Custom BBcode, bạn có thể tích hợp LaTeX hoặc MathJax trực tiếp vào XenForo, từ đó người dùng chỉ cần gõ công thức theo cú pháp định sẵn là hệ thống sẽ tự động hiển thị dưới dạng toán học chuẩn. Đây sẽ là công cụ hữu ích dành cho các diễn đàn học tập, nghiên cứu hay cộng đồng yêu thích toán học, giúp bài viết trở nên chuyên nghiệp và sinh động hơn.
Dưới đây là hướng dẫn tạo BBCode toán học cho diễn đàn Xenforo
Bạn có thể dùng CDN của MathJax để tích hợp vào XenForo.
Vào Admin CP → Appearance → Templates và mở template PAGE_CONTAINER
Chèn đoạn script sau ngay trước thẻ </head>:
Đoạn này giúp MathJax tự động nhận diện công thức được gõ giữa $.. $ hoặc \[.. \]
Vào Admin CP → Content → BB codes → Add BB code
Nhập thông tin như sau:
BB Code Tag: Math
Tiêu đề: Inline Math
Description: Soạn thảo công thức toán học
Replacement Mode: Simple Replacement
Supports Option Parameter: Không
HTML Replacement:
Lưu lại.
Để MathJax tự render khi người dùng gửi nhanh, tải thêm bài bằng AJAX hoặc mở overlay, thêm đoạn sau vào cuối body (trong PAGE_CONTAINER), dưới các script XenForo:
Giờ đây, khi đăng bài bạn có thể viết:
E = mc^2
Hoặc dùng ký hiệu inline với $.. $:
Năng lượng được tính theo công thức $E=mc^2$.
MathJax sẽ tự động render thành công thức toán học đẹp mắt.
Nếu công thức hiển thị chậm, bạn có thể bật chế độ cache hoặc tải MathJax về host riêng để tối ưu tốc độ. Có thể mở rộng bằng cách tạo thêm BBcode khác như EQ cho các phương trình dạng block.
Nếu cách làm này không hoạt động các bạn xem tiếp cách 2 bên dưới nhé, bảo đảm thành công.
Dưới đây là hướng dẫn tạo BBCode toán học cho diễn đàn Xenforo
Bước 1: Cài đặt MathJax
Bạn có thể dùng CDN của MathJax để tích hợp vào XenForo.
Vào Admin CP → Appearance → Templates và mở template PAGE_CONTAINER
Chèn đoạn script sau ngay trước thẻ </head>:
HTML:
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$','$$'], ['\\[','\\]']]
},
options: { skipHtmlTags: ['script','noscript','style','textarea','pre','code'] },
svg: { fontCache: 'global' }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js" async></script>
Đoạn này giúp MathJax tự động nhận diện công thức được gõ giữa $.. $ hoặc \[.. \]
Bước 2: Tạo Custom BBcode trong XenForo
Vào Admin CP → Content → BB codes → Add BB code
Nhập thông tin như sau:
BB Code Tag: Math
Tiêu đề: Inline Math
Description: Soạn thảo công thức toán học
Replacement Mode: Simple Replacement
Supports Option Parameter: Không
HTML Replacement:
HTML:
<span class="bbMath">{text}</span>
Lưu lại.
Để MathJax tự render khi người dùng gửi nhanh, tải thêm bài bằng AJAX hoặc mở overlay, thêm đoạn sau vào cuối body (trong PAGE_CONTAINER), dưới các script XenForo:
JavaScript:
<script>
(function() {
function typeset(nodes){
if (!window.MathJax || !MathJax.typesetPromise) return;
try { MathJax.typesetPromise(nodes ? [nodes]: undefined); } catch(e){}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function(){ typeset(); });
} else {
typeset();
}
const observer = new MutationObserver(function(muts){
for (const m of muts) {
for (const node of m.addedNodes) {
if (node.nodeType === 1) {
if (node.matches && (node.matches('.message,.bbMath,.bbMathBlock,[data-xf-init]') || node.querySelector('.bbMath,.bbMathBlock'))) {
typeset(node);
}
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
document.addEventListener('xf:reinit', function(e){ typeset(e.target); });
})();
</script>
Giờ đây, khi đăng bài bạn có thể viết:
E = mc^2
Hoặc dùng ký hiệu inline với $.. $:
Năng lượng được tính theo công thức $E=mc^2$.
MathJax sẽ tự động render thành công thức toán học đẹp mắt.
Bước 3: Kiểm tra và tinh chỉnh
Nếu công thức hiển thị chậm, bạn có thể bật chế độ cache hoặc tải MathJax về host riêng để tối ưu tốc độ. Có thể mở rộng bằng cách tạo thêm BBcode khác như EQ cho các phương trình dạng block.
Nếu cách làm này không hoạt động các bạn xem tiếp cách 2 bên dưới nhé, bảo đảm thành công.
Chỉnh sửa cuối: