如何在JSON中写入Mathjax公式并插入HTML中正常渲染

MathJax默认仅在页面初始加载完成后扫描一次DOM中的公式内容完成渲染，后续通过JavaScript动态插入的公式不会被自动识别，因此只会展示源码。此外你现有代码仅处理了选项内容的插入，没有将JSON中的题目内容赋值到页面对应节点。

1. 补全题目内容的插入逻辑
2. 所有动态内容插入完成后，主动调用MathJax的渲染接口触发公式解析，根据你使用的MathJax版本选择对应调用方法即可。

修改后的完整JS代码如下：

const currentQuestion = {
  "question": "\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}.\\]",
  "choice1": "kw",
  "choice2": "k22",
  "choice3": "k3",
  "answer": 3
}

// 插入题目内容
const questionEl = document.getElementById('question');
questionEl.innerHTML = currentQuestion.question;

// 插入选项内容
const choices = document.querySelectorAll(".choice-text");
choices.forEach((choice) => {
  const number = choice.dataset['number'];
  choice.innerHTML = currentQuestion['choice' + number];
});

// 触发MathJax渲染，以下二选一
// 如果你用的是MathJax 3.x版本
if (window.MathJax) MathJax.typeset([questionEl, ...choices]);
// 如果你用的是MathJax 2.x版本
// if (window.MathJax) MathJax.Hub.Queue(["Typeset", MathJax.Hub]);

• 确保上述JS代码在MathJax加载完成后执行，避免出现找不到MathJax对象的报错
• 后端返回的JSON存储公式时，每个反斜杠需要额外转义一次（即写两个反斜杠），避免JSON解析时吞掉转义符导致公式格式错误
• 频繁更新公式时，建议给typeset方法传入新增的DOM节点参数，只渲染更新区域，避免全局重渲染带来的性能损耗

内容的提问来源于stack exchange，提问作者Срђан Станишић