使用纯js在网页上显示Latex公式

Tisfy

已于 2023-06-29 21:37:16 修改

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：实用技巧 HTML 文章标签： javascript 开发语言 ecmascript 使用技巧 HTML

于 2023-06-29 21:30:56 首次发布

本文链接：https://blog.csdn.net/Tisfy/article/details/131464796

实用技巧同时被 2 个专栏收录

61 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

本文介绍了如何在HTML网页上使用MathJax库来渲染LaTeX公式，特别是对于包含中文的公式。由于Hexo对公式的支持有限，作者推荐将公式源码传到前端用JS处理。文章提供了MathJax的官方使用方法以及针对大陆地区的替代CDN链接。

HTML - 在网页上显示Latex公式（使用纯js在网页上显示Latex公式）

本文讲解如何使用纯JS在HTML中渲染latex公式。

前言

Hexo对公式的支持有点小小的_一言难尽，尤其是对带有中文的公式的支持程度不是很高。并且很多人（包括我）尝试了很多次都没能完美适配。最终，决定不使用hexo渲染，而是直接将公式源码返回到前端，在前端使用JS进行渲染。

官方使用方法（大陆无法访问）

MathJax的官网是mathjax.org，在Github的地址为mathjax/MathJax。

使用起来很简单，只需要在HTML页面中加入如下代码

<script>
    window.MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], }, chtml: { scale: 0.8 }};
</script>
<script src='https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js'></script>

即可。当网页加载好后，$之间以及\(之间的内容将被作为公式渲染。

大陆可用的使用方法

由于某些滥用的原因，jsdelivr在大陆无法访问。

因此必须借助其他js源，或者将mathjax所需代码字体等下载至本地。

笔者为此提供了一个大陆的不完全服务，使用笔者提供的https://letmefly.xyz/Links/JS/MathJax/tex-mml-chtml.js能够正常使用mathjax的大部分功能。

原创不易，转载请附上原文链接哦~
Tisfy：https://letmefly.blog.csdn.net/article/details/131464796