为没有分隔符的自定义标签执行 MathJax
Execute MathJax for custom tags without delimiters
我想在我们的页面上使用 mathjax,我有一个带有公式 <formula>
.
的自定义标签
但是只有当我在我的自定义标签中使用定界符时它才有效,是否可以使用定界符?
当我设置 inlineMath: [['', '']]
时,整个系统都挂了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {inlineMath: [['$', '$']]},
startup: {
elements: ['formula'],
ready: function () {
MathJax.startup.defaultReady();
}
}
}
</script>
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<p>hello world</p>
<p>this is a <formula>x^2 + y^2 = z^2</formula> formula x^2 + y^2 = z^2</p>
<p>this is a <formula>$x^2 + y^2 = z^2$</formula> formula x^2 + y^2 = z^2</p>
</body>
</html>
您可以执行类似于文档中给出的 example 的操作,该文档显示了如何处理用于保存数学的旧 v2 样式 <script>
标签。
这是一个例子:
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
options: {
renderActions: {
find: [10, function (doc) {
for (const node of document.querySelectorAll('formula')) {
const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], false);
const text = document.createTextNode('');
node.parentNode.replaceChild(text, node);
math.start = {node: text, delim: '', n: 0};
math.end = {node: text, delim: '', n: 0};
doc.math.push(math);
}
}, '']
}
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<p>this is a <formula>x^2 + y^2 = z^2</formula> formula x^2 + y^2 = z^2</p>
请注意,这会用查找 <formula>
标记的函数替换通常的数学查找函数,因此如果您还想使用原始分隔符,请将 find: [10
更改为 findTags: [9
这样原件就不会被替换,并且会 运行 在你的代码 运行 之后。
另请注意,这不会为您提供区分显示式数学和内联数学的方法(如 TeX 定界符所做的那样),因此所有数学都是内联式。当然,您可以修改代码以具有两个不同的标签,或者允许 <formula>
上的属性指定显示样式。
我想在我们的页面上使用 mathjax,我有一个带有公式 <formula>
.
但是只有当我在我的自定义标签中使用定界符时它才有效,是否可以使用定界符?
当我设置 inlineMath: [['', '']]
时,整个系统都挂了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {inlineMath: [['$', '$']]},
startup: {
elements: ['formula'],
ready: function () {
MathJax.startup.defaultReady();
}
}
}
</script>
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
<p>hello world</p>
<p>this is a <formula>x^2 + y^2 = z^2</formula> formula x^2 + y^2 = z^2</p>
<p>this is a <formula>$x^2 + y^2 = z^2$</formula> formula x^2 + y^2 = z^2</p>
</body>
</html>
您可以执行类似于文档中给出的 example 的操作,该文档显示了如何处理用于保存数学的旧 v2 样式 <script>
标签。
这是一个例子:
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
options: {
renderActions: {
find: [10, function (doc) {
for (const node of document.querySelectorAll('formula')) {
const math = new doc.options.MathItem(node.textContent, doc.inputJax[0], false);
const text = document.createTextNode('');
node.parentNode.replaceChild(text, node);
math.start = {node: text, delim: '', n: 0};
math.end = {node: text, delim: '', n: 0};
doc.math.push(math);
}
}, '']
}
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<p>this is a <formula>x^2 + y^2 = z^2</formula> formula x^2 + y^2 = z^2</p>
请注意,这会用查找 <formula>
标记的函数替换通常的数学查找函数,因此如果您还想使用原始分隔符,请将 find: [10
更改为 findTags: [9
这样原件就不会被替换,并且会 运行 在你的代码 运行 之后。
另请注意,这不会为您提供区分显示式数学和内联数学的方法(如 TeX 定界符所做的那样),因此所有数学都是内联式。当然,您可以修改代码以具有两个不同的标签,或者允许 <formula>
上的属性指定显示样式。