Vue使用MathJax动态识别数学公式

最新推荐文章于 2022-10-24 14:40:35 发布

大军465

最新推荐文章于 2022-10-24 14:40:35 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： Vue

本文链接：https://blog.csdn.net/u013449046/article/details/105457666

版权

本文介绍了如何在Vue项目中使用MathJax动态渲染数学公式，包括引入MathJax、配置方法、渲染公式的步骤，以及解决在使用过程中遇到的问题，如子组件监听问题和公式转义问题。

摘要由CSDN通过智能技术生成

文章目录

MathJax介绍
步骤
使用
遇到问题

MathJax介绍

MathJax是一款运行在浏览器中的开源的数学符号渲染引擎，使用MathJax可以方便的在浏览器中显示数学公式，不需要使用图片。目前，MathJax可以解析Latex、MathML和ASCIIMathML的标记语言。

步骤

引入MathJax

我们通过在index.html中加入下面语句即可引入MathJax，该语句导入的是国内的CDN。

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

创建方法配置MathJax

创建globalVariable.js文件，并在里面写下配置方法方法

let isMathjaxConfig = false;//用于标识是否配置
const initMathjaxConfig = () => {
   
    if (!window.MathJax) {
   
        return;
    }
    window.MathJax.Hub.Config({
   
        showProcessingMessages: false, //关闭js加载过程信息
        messageStyle: "none", //不显示信息
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {
   
            inlineMath: [["$", "$"], ["\\(", "\\)"]], //行内公式选择符
            displayMath: [["$$", "$$"], ["\\[", "\\]"]], //段内公式选择符
            skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签
        },
        "HTML-CSS": {
   
            availableFonts: [