1. 必须要说
1.1 开发背景
博主使用Vue开发的个人博客，博文使用markdown语法编写，然后交给前端渲染。为了更方便的进行说明和讲解，需要前端支持LaTex的数学公式，并且渲染好看的样式。
1.2 效果展示
数学公式分为行内公式和跨行公式，当然都需要支持和渲染。
我准备了3条公式，分别是行内公式、跨行公式和超长的跨行公式：
$\\alpha+\\beta=\\gamma$\r\n$$\\alpha+\\beta=\\gamma$$\r\n$$\\int_{0}^{1}f(x)dx \\sum_{1}^{2}\\int_{0}^{1}f(x)dx \\sum_{1}^{2}\\int_{0}^{1}f(x)dx \\sum_{1}^{2}\\int_{0}^{1}f(x)dx \\sum_{1}^{2}\\int_{0}^{1}f(x)dx \\sum_{1}^{2}\\int_{0}^{1}f(x)dx \\sum_{1}^{2}\\int_{0}^{1}f(x)dx \\sum_{1}^{2}\\int_{0}^{1}f(x)dx \\sum_{1}^{2}\\int_{0}^{1}f(x)dx \\sum_{1}^{2}\\int_{0}^{1}f(x)dx \\sum_{1}^{2}$$2. 使用MathJax
2.1 引入CDN
在使用MathJax之前，需要通过CDN引入, 在<body>标签中添加： <script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>。
2.2 配置MathJax
将MathJax的配置封装成一个函数：
let isMathjaxConfig = false; // 防止重复调用Config，造成性能损耗\r\nconst initMathjaxConfig = () => {\r\n if (!window.MathJax) {\r\n return;\r\n }\r\n window.MathJax.Hub.Config({\r\n showProcessingMessages: false, //关闭js加载过程信息\r\n messageStyle: "none", //不显示信息\r\n jax: ["input/TeX", "output/HTML-CSS"],\r\n tex2jax: {\r\n inlineMath: [["$", "$"], ["\\\\(", "\\\\)"]], //行内公式选择符\r\n displayMath: [["$$", "$$"], ["\\\\[", "\\\\]"]], //段内公式选择符\r\n skipTags: ["script", "noscript", "style", "textarea", "pre", "code", "a"] //避开某些标签\r\n },\r\n "HTML-CSS": {\r\n availableFonts: ["STIX", "TeX"], //可选字体\r\n showMathMenu: false //关闭右击菜单显示\r\n }\r\n });\r\n isMathjaxConfig = true; // \r\n};2.3 使用MathJax渲染
MathJax提供了window.MathJax.Hub.Queue来执行渲染。在执行完文本获取操作后，进行渲染操作：
if (isMathjaxConfig === false) { // 如果：没有配置MathJax\r\n initMathjaxConfig();\r\n }\r\n // 如果，不传入第三个参数，则渲染整个document\r\n // 因为使用的Vuejs，所以指明#app，以提高速度\r\nwindow.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')]);2.4 修改默认样式
MathJax默认样式在被鼠标focus的时候，会有蓝色边框出现。对于超长的数学公式，x方向也会溢出。
添加以下样式代码，覆盖原有样式，从而解决上述问题：
/* MathJax v2.7.5 from 'cdnjs.cloudflare.com' */\r\n.mjx-chtml {\r\n outline: 0;\r\n }\r\n.MJXc-display {\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n }3. 注意事项
3.1 不要使用npm
不要使用npm，会有报错，google了一圈也没找到解决方案，github上源码地址有对应的issue还没解决。
博主多次尝试也没有找到解决方法，坐等版本更新和大神指点。
3.2 动态数据
在SPA单页应用中，数据是通过Ajax获取的。此时，需要在数据获取后，再执行渲染。
如果习惯es5，可以在回调函数中调用window.MathJax.Hub.Queue。但是更推荐es6，配合Promise和async/await来避免“回调地域”。
3.3 版本问题
对于不同版本或者不同CDN的MathJax，第二部分的样式覆盖的class名称不同。比如在cdnboot的v2.7.0版本中，样式覆盖的代码应该是下面这段：
/* MathJax v2.7.0 from 'cdn.bootcss.com' */\r\n.MathJax {\r\n outline: 0\r\n }\r\n.MathJax_Display {\r\n overflow-x: auto;\r\n overflow-y: hidden;\r\n }