前言

项目中要引入第三方题库，而题库中存在公式类题目，因此前端要做题目的展示。

正文

因为第三方题库是采用MathJax渲染，且已经经过业务的锤炼，因此我们也照猫画虎同样采用MathJax来渲染。

1.MathJax是什么

• 官网是这样说明的：MathJax 是一个开源 JavaScript 显示引擎，适用于 LaTeX、MathML 和 AsciiMath 表示法，适用于所有现代浏览器，内置对屏幕阅读器等辅助技术的支持。

• 我们这边用到的是LaTex，因此我这里简单说明一下什么是LaTex：LaTex的基础是Tex，Tex是一个排版系统，是一个拥有自己完整体系的语法，可以用于各种科研、试卷甚至音乐需要，而LaTex建立在Tex的基础上进行性能扩展，相当于Tex的一个宏包。而对于使用者来说，由于LaTex的使用还是有一定的难度和复杂度，大家还是只在公式方面比较青睐它，所以大多数我们常看见的应用也都是与公式相关。

详细细节大家可以自行百度～

2.为什么要用MathJax

• 看到这里大家应该也知道我们为什么要使用MathJax，这里总结一下，两方面原因：

  • 1.第三方题库采用了MathJax，切经过了业务的锤炼

  • 2.MathJax具有非常优秀的兼容性

3.如何使用MathJax

• 关于这个问题官方文档中写的很详细。这里总结一下：

  • 1.配置与加载

  这里要注意一下版本，v2和v3的版本使用还是有很大差别的，我们项目中用到的是v3的版本，也建议大家使用。html中添加如下代码即可：

  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']], // 解析行内公式
        displayMath: [["$$", "$$"], ["\\[", "\\]"]],   //段内公式选择符
      },
      svg: {
        fontCache: 'global'
      }
    };
  </script>
  <script type="text/javascript" id="MathJax-script" async
    src="https://juejin.cn/post/https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
  </script>
  复制代码

  大致原理为，MathJax会按照配置找到需要渲染的公式，例如$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$转换为
  

  $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

  © 版权声明

  文章版权归作者所有，未经允许请勿转载。
  THE END
  前端