test-math-render.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>数学公式渲染测试</title>
  7. <style>
  8. body {
  9. font-family: Arial, sans-serif;
  10. max-width: 800px;
  11. margin: 0 auto;
  12. padding: 20px;
  13. line-height: 1.6;
  14. }
  15. .test-section {
  16. margin: 20px 0;
  17. padding: 20px;
  18. border: 1px solid #ddd;
  19. border-radius: 8px;
  20. background-color: #f9f9f9;
  21. }
  22. .math-render {
  23. background-color: white;
  24. padding: 10px;
  25. border-radius: 4px;
  26. margin: 10px 0;
  27. }
  28. .status {
  29. background-color: #e8f5e8;
  30. padding: 10px;
  31. border-radius: 4px;
  32. margin: 10px 0;
  33. font-weight: bold;
  34. }
  35. .error {
  36. background-color: #f8d7da;
  37. color: #721c24;
  38. }
  39. .success {
  40. background-color: #d4edda;
  41. color: #155724;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <h1>数学公式渲染测试</h1>
  47. <div class="test-section">
  48. <h2>测试1: 基础数学公式</h2>
  49. <div class="math-render">
  50. $x^2 + 2x + 1 = 0$ 是一个二次方程。
  51. </div>
  52. </div>
  53. <div class="test-section">
  54. <h2>测试2: 包含LaTeX命令的题目(类似OCR记录)</h2>
  55. <div class="math-render">
  56. 已知集合A={-1,1,3},B={0,1,3},,则A∪B=A.{1,3} B.{-1,1,3} C.{0,1,3} D.{-1,0,1,3}
  57. </div>
  58. </div>
  59. <div class="test-section">
  60. <h2>测试3: 函数题目</h2>
  61. <div class="math-render">
  62. 函数$f(x) = \\ln x + x - 2$的零点所在的区间为
  63. </div>
  64. </div>
  65. <div class="test-section">
  66. <h2>测试4: 复杂数学公式(可能引起问题)</h2>
  67. <div class="math-render">
  68. 已知幂函数$$f \left(x \right) = x^{a}$$,则"a>0"是"f(x)在(0,+∞)上单调递增"的
  69. A.充分不必要条件 B.必要不充分条件
  70. C.充分必要条件 D.既不充分也不必要条件
  71. </div>
  72. </div>
  73. <div class="test-section">
  74. <h2>测试5: 混合格式</h2>
  75. <div class="math-render">
  76. 混合格式:$\\frac{1}{2}$、$$\\frac{\\sqrt{3}}{2}$$和$\\frac{\\sqrt{2}}{2}$
  77. </div>
  78. </div>
  79. <div id="status" class="status">
  80. <div>正在加载数学渲染库...</div>
  81. </div>
  82. <script>
  83. // 简化的测试版本,直接引入必要的库
  84. console.log('开始加载测试页面...');
  85. // 模拟简化版的数学渲染逻辑
  86. function simpleTestRender() {
  87. const elements = document.querySelectorAll('.math-render');
  88. let processedCount = 0;
  89. let errorCount = 0;
  90. elements.forEach((elem, index) => {
  91. try {
  92. let content = elem.innerHTML || elem.textContent;
  93. // 检测是否包含数学公式
  94. if (content.includes('$') || content.includes('\\(') || content.includes('\\[')) {
  95. console.log(`处理数学公式 ${index + 1}:`, content.substring(0, 50) + '...');
  96. // 简单的公式标准化
  97. content = content.replace(/\\left/g, '(');
  98. content = content.replace(/\\right/g, ')');
  99. content = content.replace(/\\\\/g, '\\');
  100. elem.innerHTML = content;
  101. processedCount++;
  102. }
  103. } catch (e) {
  104. console.error(`处理元素 ${index + 1} 时出错:`, e);
  105. errorCount++;
  106. }
  107. });
  108. const statusDiv = document.getElementById('status');
  109. if (errorCount === 0) {
  110. statusDiv.className = 'status success';
  111. statusDiv.innerHTML = `
  112. <div>✅ 数学公式处理完成!</div>
  113. <div>成功处理 ${processedCount} 个包含公式的元素</div>
  114. `;
  115. } else {
  116. statusDiv.className = 'status error';
  117. statusDiv.innerHTML = `
  118. <div>❌ 处理过程中发现 ${errorCount} 个错误</div>
  119. <div>请检查浏览器控制台获取详细信息</div>
  120. `;
  121. }
  122. }
  123. // 页面加载完成后执行测试
  124. document.addEventListener('DOMContentLoaded', function() {
  125. console.log('页面加载完成,开始处理数学公式...');
  126. setTimeout(simpleTestRender, 100);
  127. });
  128. </script>
  129. </body>
  130. </html>