yms
/
math_cms


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!DOCTYPE html>
<html>
<head>
    <title>Math Formula Test</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/css/katex/katex.min.css">
    <style>
        body { font-family: Arial, sans-serif; padding: 40px; background: #f5f5f5; }
        .test-card { background: white; padding: 30px; margin: 20px 0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .test-title { color: #333; margin-bottom: 20px; }
        .formula { font-size: 18px; padding: 15px; background: #f9f9f9; border-radius: 4px; }
        .success { color: #28a745; }
        .error { color: #dc3545; }
    </style>
</head>
<body>
    <div class="test-card">
        <h1 class="test-title">数学公式渲染测试</h1>

        <h3>测试 1: 基本公式</h3>
        <p class="formula">
            <strong>LaTeX:</strong> $x^2 - 9$<br>
            <strong>应该显示:</strong> x 的平方减 9<br>
            <strong>状态:</strong> <span id="test1" class="error">未渲染</span>
        </p>

        <h3>测试 2: 分数公式</h3>
        <p class="formula">
            <strong>LaTeX:</strong> $\frac{x^2 - 9}{x + 3}$<br>
            <strong>应该显示:</strong> 分式<br>
            <strong>状态:</strong> <span id="test2" class="error">未渲染</span>
        </p>

        <h3>测试 3: 根号公式</h3>
        <p class="formula">
            <strong>LaTeX:</strong> $\sqrt{x^2 - 9}$<br>
            <strong>应该显示:</strong> 根号<br>
            <strong>状态:</strong> <span id="test3" class="error">未渲染</span>
        </p>
    </div>

    <div class="test-card">
        <h2 class="test-title">加载状态</h2>
        <ul>
            <li>KaTeX Core: <span id="katex-status" class="error">未加载</span></li>
            <li>Auto-render: <span id="autorender-status" class="error">未加载</span></li>
            <li>CSS: <span id="css-status" class="error">未加载</span></li>
        </ul>
    </div>

    <script src="/js/katex.min.js"></script>
    <script src="/js/auto-render.min.js"></script>

    <script>
        // 等待页面加载完成
        window.addEventListener('load', function() {
            // 检查 KaTeX
            if (typeof katex !== 'undefined') {
                document.getElementById('katex-status').textContent = '已加载';
                document.getElementById('katex-status').className = 'success';
            }

            // 检查 auto-render
            if (typeof renderMathInElement !== 'undefined') {
                document.getElementById('autorender-status').textContent = '已加载';
                document.getElementById('autorender-status').className = 'success';
            }

            // 检查 CSS (通过检查 computed style)
            const testDiv = document.createElement('div');
            testDiv.className = 'katex';
            document.body.appendChild(testDiv);
            const katexStyles = window.getComputedStyle(testDiv);
            if (katexStyles.fontSize !== '16px' || katexStyles.fontFamily.includes('KaTeX')) {
                document.getElementById('css-status').textContent = '已加载';
                document.getElementById('css-status').className = 'success';
            }
            document.body.removeChild(testDiv);

            // 渲染数学公式
            if (typeof renderMathInElement !== 'undefined') {
                renderMathInElement(document.body, {
                    delimiters: [
                        {left: '$$', right: '$$', display: true},
                        {left: '$', right: '$', display: false},
                        {left: '\\(', right: '\\)', display: false},
                        {left: '\\[', right: '\\]', display: true}
                    ],
                    throwOnError: false
                });

                // 检查是否渲染成功
                setTimeout(function() {
                    const formulas = document.querySelectorAll('.katex');
                    if (formulas.length > 0) {
                        document.getElementById('test1').textContent = '已渲染';
                        document.getElementById('test1').className = 'success';
                    }
                    if (formulas.length > 1) {
                        document.getElementById('test2').textContent = '已渲染';
                        document.getElementById('test2').className = 'success';
                    }
                    if (formulas.length > 2) {
                        document.getElementById('test3').textContent = '已渲染';
                        document.getElementById('test3').className = 'success';
                    }

                    console.log('渲染完成，找到 ' + formulas.length + ' 个数学公式');
                }, 500);
            }
        });
    </script>
</body>
</html>