[Admin]

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ướ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>:

<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:

<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:

<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.

 

[Admin]

Cách 2: Sử dụng thư viện Katex​

Cần đăng nhập và nhấn Thích để xem đoạn này

Cách để trình duyệt tự Auto Render Ajax không cần tải lại trang:

Thêm đoạn mã sau vào trước thẻ đóng </body> dưới đoạn script bên trên:

Nội dung đặc biệt

Bạn cần 200,000 Xu để xem nội dung này, kiếm xu hoặc nạp xu tại đây