mathjax 把公式变为svg

2024年4月11日

MathJax 是一款流行的 JavaScript 库，用于在网页上呈现数学公式。默认情况下，MathJax 使用 HTML 和 CSS 来渲染数学公式，但也可以配置为使用 SVG（可缩放矢量图形）来呈现公式。使用 SVG 可以提供更好的缩放和打印质量。

要将 MathJax 配置为使用 SVG 呈现公式，你需要修改 MathJax 的配置文件。这通常是通过在 HTML 页面中包含一个特殊的 MathJax 配置脚本来完成的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MathJax SVG Example</title>
    <!-- 引入 MathJax 的 CDN -->
    <script type="text/javascript" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
    </script>
    <!-- MathJax 配置 -->
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({
            tex2jax: {
                inlineMath: [['$','$'], ['\\(','\\)']],
                displayMath: [['$$','$$']],
                processEscapes: true
            },
            svg: {
                font: "TeX"
            }
        });
        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    </script>
</head>
<body>
    <h1>MathJax SVG Example</h1>
    <p>这是一个使用 MathJax 和 SVG 呈现的数学公式示例：</p>
    <p>行内公式：$E = mc^2$</p>
    <p>显示公式：$$
        \sum_{i=0}^n i = \frac{n(n+1)}{2}
    $$</p>
    <p>当页面加载时，这些公式将自动被 MathJax 处理并以 SVG 格式显示。</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>MathJax SVG Example</title>

src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">

</script>

MathJax.Hub.Config({

tex2jax: {

inlineMath: [['$','$'], ['\$','\$']],

displayMath: [['$$','$$']],

processEscapes: true

svg: {

font: "TeX"

}

});

MathJax.Hub.Queue(["Typeset", MathJax.Hub]);

</script>

</head>

<body>

<h1>MathJax SVG Example</h1>

<p>这是一个使用 MathJax 和 SVG 呈现的数学公式示例：</p>

<p>显示公式：$$

\sum_{i=0}^n i = \frac{n(n+1)}{2}

$$</p>

<p>当页面加载时，这些公式将自动被 MathJax 处理并以 SVG 格式显示。</p>

</body>

</html>

一	二	三	四	五	六	日
« 3月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30