1. Introduce CDN

Insert the CDN link address into the project’s index.html as follows:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <meta name="viewport" content="width=device-width,initial-scale=1.0"> </title> <link rel=" dnS-prefetch "href="//cdn.bootcss.com" /> <script type="text/javascript" SRC = "/ / cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML" > < / script > < / head > < body > < div id="app"></div> <! -- built files will be auto injected --> </body> </html>Copy the code

2. Configure mathJax Config

You can add the globalvariable.js file to the util or Assert package and say something like this:

let isMathjaxConfig = false; Const initMathjaxConfig = () => {if (! window.MathJax) { return; } window. MathJax. Hub. Config ({showProcessingMessages: false, / / close js loading process information messageStyle: "none", / / jax does not display information: [" input/TeX ", "the output/HTML and CSS"], tex2jax: {inlineMath: [[" $", "$"], [" \ \", \ \ ") "]], / / the selector displayMath inline formula: "[[$$$$"," "], [" \ \ "["," \ \]]], / / formula of segment selector skipTags: ["script", "noscript", "style", "textarea", "pre"] // Avoid some tags}, "HTML-css ": {availableFonts: ["STIX", "TeX"], // Optional font showMathMenu: false // close right click menu display}}); isMathjaxConfig = true; // Complete configuration, change to true}; const MathQueue = function (elementId) { if (! window.MathJax) { return; } window.MathJax.Hub.Queue(["Typeset", window.MathJax.Hub, document.getElementById(elementId)]); // We can call name,class,id with native js. }; export default { isMathjaxConfig, initMathjaxConfig, MathQueue, }Copy the code

3. Add main.js

The configuration is as follows:

/ / introduction of mathematical formulas render import globalVariable from '. / utils/globalVariable Vue.prototype.com monsVariable = globalVariable;Copy the code

4, the use of

Add the ID to the div that you want to render the formula, and load the render content under the div as follows:

 <div id="questionDiv">
 	<div v-html="content"></div>
 	<div v-html="analysis"></div>
 </div>
Copy the code

A) content B) analysis C) analysis D) analysis

(2012• Beijing) Known set A&#61; {x ∈ R | 3 x & # 43; 2&#xff1e; 0}&#xff0c; B&#61; {x ∈ R | (x & # 43; 1)(x-3)&#xff1e; 0}&#xff0c; Is A studying B & # 61; () < br / > a. (- up & # xff0c; -1)<br/>B. (-1&#xff0c; \ [- \ frac {2} {3} \)) < br / > C (\ [- \ frac {2} {3} \) & # xff0c; 3) < br / > d. (3 # & xff0c; & # 43; Up)Copy the code
Solution & # xff1a; Because B & # 61; {x ∈ R | (x & # 43; 1)(x-3)&#xff1e; 0} & # 61; {x|x&#xff1c; 1 or x & # xff1e; 3}&#xff0c; <br /> set A&#61; {x ∈ R | 3 x & # 43; 2&#xff1e; 0} & # 61; {x|x \( &gt; - \frac{2}{3} \) }&#xff0c; <br /> So A∩B&#61; {x|x \( &gt; - \ frac {2} {3}} \) studying {x | x & # xff1c; 1 or x & # xff1e; 3} the & # 61; {x|x&#xff1e; 3}&#xff0c; <br /> so choose &#xff1a; D&#xff0e;Copy the code

Rendering needs to be done each time you get something to render

/** * getQuestionList() {loadQuestion(this.question.id). Then (response => {const question = response.data; if (question) { this.content = question.content; this.analysis = question.analysis; $nextTick(function () {this.$nextTick(function ()) { Or we'll get less than data if (this.com monsVariable isMathjaxConfig) {/ / determine whether the initial configuration, if no configuration. this.commonsVariable.initMathjaxConfig(); } this.commonsVariable.MathQueue("questionDiv"); // Pass in the component ID to be rendered by MathJax})}})}Copy the code

At this point, you can render it as you want.