math_cms/resources/views/filament/layout/math-renderer.blade.php

@once
    <link rel="stylesheet" href="/css/katex/katex.min.css">
    <style>
        /* 避免 $$ 块级公式强制换行，用 inline 展示方便题干内联 */
        .katex-display {
            display: inline;
            margin: 0;
        }
    </style>
    <script src="/js/katex.min.js"></script>
    <script src="/js/auto-render.min.js"></script>
    <script>
        (() => {
            const MAX_ATTEMPTS = 60;
            let attempts = 0;
            let observer;

            const renderOptions = {
                delimiters: [
                    // 统一用 inline 渲染，避免题干中 $$ 造成强制换行
                    {left: "$$", right: "$$", display: false},
                    {left: "$", right: "$", display: false},
                    {left: "\\(", right: "\\)", display: false},
                    {left: "\\[", right: "\\]", display: false},
                ],
                strict: 'ignore',
                throwOnError: false,
                ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'option']
            };

            const ready = () =>
                typeof window.renderMathInElement !== 'undefined' &&
                typeof window.katex !== 'undefined';

            const renderAll = () => {
                if (!ready()) return;
                document.querySelectorAll('.math-render').forEach(el => {
                    el.removeAttribute('data-rendered');
                });
                window.renderMathInElement(document.body, renderOptions);
            };

            const debouncedRender = () => {
                clearTimeout(window.__mathRenderTimer);
                window.__mathRenderTimer = setTimeout(renderAll, 25);
            };

            const waitAndRender = () => {
                if (ready()) {
                    renderAll();
                    setupObserver();
                    return;
                }
                if (attempts++ < MAX_ATTEMPTS) {
                    setTimeout(waitAndRender, 50);
                }
            };

            const setupObserver = () => {
                if (observer) return;
                observer = new MutationObserver((mutations) => {
                    for (const mutation of mutations) {
                        if (mutation.addedNodes.length > 0) {
                            debouncedRender();
                            break;
                        }
                    }
                });
                observer.observe(document.body, { childList: true, subtree: true });
            };

            // Livewire 局部刷新后重渲染
            document.addEventListener('livewire:init', () => {
                if (window.Livewire?.hook) {
                    Livewire.hook('message.processed', () => debouncedRender());
                }
            });

            // 手动触发事件
            document.addEventListener('math:render', () => debouncedRender());

            // 全局暴露便于调试
            window.renderMath = () => {
                waitAndRender();
            };

            // 初始渲染
            waitAndRender();
        })();
    </script>
@endonce