MathJax无法正确显示动态添加的（使用js）矩阵

Question

我是MathJax的新手，刚刚开始学习它。我试图通过使用js将其添加到页面中来显示矩阵。但是它没有被正确渲染。我用于放置矩阵的代码是：

function displayTransformationMatrix()
{
    var matrix = "$$\begin{bmatrix} 1 & 0 & 0 & vx \\ 0 & 1 & 0 & vy \\ 0 & 0 & 1 & vz \\ 0 & 0 & 0 & 1 \end{bmatrix}$$"
    var tranMat = document.getElementById("transformMatrix");
    tranMat.innerHTML = matrix;
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, 'transformMatrix']);
}

这里transformMatrix是div，vx, vy, vz是变量。当将相同的文本直接添加到div时，矩阵可以正确呈现，但是如果这样做，它将得到以下效果：

我在做什么错？我刚刚开始学习MathJax，因此请理解是否存在一些愚蠢的错误。

Answer 1

在javascript中\被保留为转义符，如果您希望将其作为字符串，则必须将其加倍并写成\\（请参见控制台中的日志）

function displayTransformationMatrix()
{
    var matrix = "$$\\begin{bmatrix} 1 & 0 & 0 & vx \\\\ 0 & 1 & 0 & vy \\\\ 0 & 0 & 1 & vz \\\\ 0 & 0 & 0 & 1 \\end{bmatrix}$$"
    var tranMat = document.getElementById("transformMatrix");
    tranMat.innerHTML = matrix;
    MathJax.Hub.Queue(["Typeset", MathJax.Hub, 'transformMatrix']);
    console.log(matrix);
}

displayTransformationMatrix();

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_SVG-full" type="text/javascript"></script>

 <span id="transformMatrix"></span>