math_cms/resources/views/examples/math-render-example.blade.php

<div>
    <div class="space-y-6">
        <div class="bg-white p-6 rounded-lg border">
            <h2 class="text-2xl font-bold mb-4">数学公式渲染示例</h2>

            <!-- 示例 1: 简单渲染 -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-3">1. 基本用法</h3>
                <x-math-render content="已知二次函数 $f(x) = ax^2 + bx + c$，求......" />
            </div>

            <!-- 示例 2: 块级公式 -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-3">2. 块级公式</h3>
                <div class="math-render bg-gray-50 p-4 rounded">
                    $$
                    \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
                    $$
                </div>
            </div>

            <!-- 示例 3: 复杂公式 -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-3">3. 复杂公式</h3>
                <div class="math-render">
                    欧拉公式：$e^{i\pi} + 1 = 0$<br>
                    二次公式：$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$<br>
                    三角恒等式：$\sin^2(x) + \cos^2(x) = 1$
                </div>
            </div>

            <!-- 示例 4: 矩阵 -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-3">4. 矩阵</h3>
                <div class="math-render">
                    $$
                    \begin{bmatrix}
                    a & b \\
                    c & d
                    \end{bmatrix}
                    $$
                </div>
            </div>

            <!-- 示例 5: 求和与积分 -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-3">5. 求和与积分</h3>
                <div class="math-render">
                    求和：$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$<br>
                    积分：$\int_{-\infty}^{\infty} e^{-x^2} dx$<br>
                    连乘：$\prod_{i=1}^{n} i$
                </div>
            </div>

            <!-- 示例 6: 动态更新 -->
            <div class="mb-8">
                <h3 class="text-lg font-semibold mb-3">6. 动态更新</h3>
                <div class="space-y-4">
                    <input
                        type="text"
                        id="dynamic-input"
                        class="w-full border rounded p-2"
                        placeholder="输入 LaTeX 公式，例如：$x^2 + y^2 = r^2$"
                    >
                    <div class="math-render" id="dynamic-output">
                        输入 LaTeX 公式查看预览...
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('dynamic-input');
    const output = document.getElementById('dynamic-output');

    if (input && output) {
        input.addEventListener('input', (e) => {
            const value = e.target.value;
            output.dataset.mathContent = value;
            output.textContent = value || '输入 LaTeX 公式查看预览...';

            // 触发重新渲染
            if (typeof window.MathRender !== 'undefined') {
                window.MathRender.render(output);
            }
        });
    }
});
</script>
@endpush