vue 使用MathJax 展示数学公式 svg格式、chtml格式

最新推荐文章于 2024-04-30 18:21:09 发布

GaoGao吖

最新推荐文章于 2024-04-30 18:21:09 发布

阅读量1.2k

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_43529068/article/details/129882053

版权

vue index.html页面引入MathJax 包（3.0以上版本）

	 <!-- 3的配置方式 配置MathJax的最简单方法是将 MathJax 对象中的 <script> 在加载mathjax本身的脚本之前标记 -->
   <script>
    MathJax = {
      tex:{
              inlineMath: [['$', '$'], ['\\(', '\\)']]
          },
      svg: {
          fontCache: 'local',            // or 'global' or 'none'
      };
  </script>
    <!-- chtml输出方式 -->
    <!-- <script id="MathJax-script" async src="https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js"></script>     -->
    <!-- svg输出方式 -->
    <script type="text/javascript" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>

页面中动态调用（非动态代码会自动识别展示公式）

	svg = MathJax.tex2svg('\\frac{1}{x^2-1}', {display: true});
  console.log(MathJax.startup.adaptor.outerHTML(svg)); 
  //document.getElementById("ShowLatexData").innerHTML= MathJax.startup.adaptor.outerHTML(svg);  //动态输入代码后展示公式