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

@once
    @push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    @endpush

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        console.log('数学渲染器加载');

        function renderMath() {
            // 查找所有包含 $$ 的元素
            const elements = document.querySelectorAll('*');

            elements.forEach(element => {
                if (element.children.length === 0) { // 只处理叶子节点
                    const text = element.textContent;
                    if (text && text.includes('$$')) {
                        try {
                            const newHtml = text.replace(/\$\$([^$]+)\$\$/g, (match, formula) => {
                                return katex.renderToString(formula.trim(), {
                                    throwOnError: false,
                                    displayMode: true
                                });
                            });

                            if (newHtml !== text) {
                                element.innerHTML = newHtml;
                            }
                        } catch (e) {
                            console.warn('数学公式渲染失败:', e);
                        }
                    }
                }
            });
        }

        // 页面加载后渲染
        setTimeout(renderMath, 500);

        // Livewire 更新后重新渲染
        if (window.Livewire) {
            window.Livewire.on('updated', () => {
                setTimeout(renderMath, 100);
            });
        }

        // 添加手动渲染函数
        window.renderMath = renderMath;
    });
    </script>
    @endpush
@endonce