前端渲染数学公式的实现原理通常涉及以下几个主要方面:
一、解析输入
1.语法解析:
\frac{a}{b}
表示分数,\sqrt{x}
表示平方根等。2.构建内部表示:
二、渲染过程
1.排版和布局:
2.绘制和显示:
<span>
元素和 CSS 样式来设置字体和颜色,或者使用 SVG 图形来绘制特定的符号(如积分符号、根号等)。三、渲染输出
1.浏览器渲染引擎:
在前端渲染公式时,有多个渲染库可以选择。以下是一些常用的前端公式渲染库:
KaTeX和MathJax都是用于在网页上渲染数学公式的JavaScript库,但它们在多个方面存在显著差异:
KaTeX:
MathJax:
KaTeX:
MathJax:
KaTeX:
KaTeX:
MathJax:
KaTeX:
KaTeX:
MathJax:
cdn引入
<script
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
id="MathJax-script"
async
></script>
<div class="root">
<h2>化学公式</h2>
<p>
$\mathrm{F}\mathrm{e}+{\mathrm{H}}_{2}{\mathrm{S}\mathrm{O}}_{4}={\mathrm{F}\mathrm{e}\mathrm{S}\mathrm{O}}_{4}+{\mathrm{H}}_{2}\uparrow$
</p>
<h2>物理公式</h2>
<p>$E = mc^2$。</p>
<h2>数学公式</h2>
<p>
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$
</p>
</div>
//...
<script>
window.MathJax = {
tex: {
inlineMath: [
["$", "$"],
["\\(", "\\)"],
],
displayMath: [
["$$", "$$"],
["\\[", "\\]"],
],
processEscapes: true,
processEnvironments: true,
},
options: {
skipHtmlTags: ["script", "noscript", "style", "textarea", "pre"],
},
};
if(window.MathJax && window.MathJax.typeset) {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
</script>
需要注意到点是,因为是数据是异步,页面会短暂出现公式原始数据闪烁
MathJax.typeset 和 MathJax.typesetPromise
MathJax.typesetPromise() 函数的主要作用是将指定的 DOM 元素中的数学公式进行排版和渲染。它返回一个 Promise 对象,当数学公式排版和渲染完成时,Promise 将被解析(resolve)。这使得你可以在数学公式渲染完成后执行其他操作,例如在公式显示后执行动画效果。
MathJax.typeset() 是 MathJax 库中的一个函数,用于在网页上重新渲染数学公式。当你修改了页面上的数学公式或者需要重新排版时,可以使用这个函数来更新显示。
与 MathJax.typesetPromise() 不同,MathJax.typeset() 是一个同步函数,它会立即执行排版和渲染操作,而不是返回一个 Promise 对象。这意味着在调用 MathJax.typeset() 后,数学公式会立即更新,而不需要等待 Promise 解析。
MathJax.typeset() 函数在某些情况下可能会导致页面闪烁,因为它会立即更新 DOM。为了避免这种情况,你可以考虑使用MathJax.typesetPromise(),它会在下一个动画帧中执行排版和渲染操作,从而减少闪烁的可能性。
if (window.MathJax && window.MathJax.typeset) {
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
}
if (window.MathJax && window.MathJax.typesetPromise) {
// 异步渲染,渲染成功回调,可以先展示loading,渲染完成后再显示公式
window.MathJax.typesetPromise([dom])
.then(() => {
// success
})
.catch((err) => {
// fail
});
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。