preface
A third party question bank should be introduced in the project, and there are formula questions in the question bank, so the front end of the question should be displayed.
The body of the
Because the third party question bank is using MathJax rendering, and has been business tempered, so we also use MathJax rendering.
1. MathJax is what
-
MathJax is an open source JavaScript display engine for LaTeX, MathML, and AsciiMath notation, for all modern browsers, with built-in support for assistive technologies such as screen readers.
-
LaTex is what we use here, so LET me just briefly explain what LaTex is: LaTex is based on Tex, which is a typesetting system, a grammar with a complete system of its own that can be used for various scientific research, exam papers, and even music needs. LaTex is built on Tex as a macro package. For users, LaTex is still difficult and complicated to use, so they prefer it only in terms of formulas. Therefore, most applications we often see are related to formulas.
Detailed details can be baidu ~
2. Why use MathJax
-
Now you should know why we’re using MathJax, but to summarize, there are two reasons:
-
1. MathJax is adopted in the third party question bank, which has been tempered by the business
-
2.MathJax has excellent compatibility
-
3. How to use MathJax
-
The official documentation on this is very detailed. To summarize:
- 1. Configure and load
Here we should pay attention to the version, v2 and V3 version use is still a big difference, we use the v3 version in the project, also recommend you to use. HTML add the following code:
<script>
MathJax = {
tex: {
inlineMath: [['$'.'$'], ['\ \ ('.'\ \]']], // Parse the inline formula
displayMath: [["$$"."$$"], ["\ \ ["."\ \]"]], // An in-segment formula selector
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
Copy the code$$x = {-b \ PM \ SQRT {b^2-4ac} \over 2a}.$$is converted to
But MathJax doesn’t render a formula in isolation, it renders the entire page, so there can be performance issues involving async, which we’ll discuss more later.
- 2. How do I host code locally
As we can see above, we are referring to CDN js, which is definitely not allowed in real projects, so how do we manage the code locally?
Run NPM install mathjax@3 or download the code from Github to the local server, and the corresponding JS reference path should be changed correctly.
- 3. Final configuration file
Because there are multiple entries in the project and you don’t want to add configuration code to each HTML, you have removed a layer of loaded JS as follows:
/ *
* @description: MathJax loading method
* @Usage: <script type="text/javascript" id=" mathjax-script "defer SRC ="/assets/lib/ mathjax-load-mathjax-v1.js "></script>
* /
(function () {
if (!window.MathJax) {
// The amsMath package is a set of macros that LaTeX must master
// The \ boldSymbol renders as a bold italic character. Mathbf {a} to Roman
// MhChem Chemistry formula macro package
// AMSsymbols command symbols
// The extPfeil extension adds more macros for generating extensible arrows, including \ xtwoHeadRightarRow, \ xTwoHeadleftarrow, \ xmapSTO, \ xLongequal, \xtofrom, As well as non-standard Newextarrow to create your own extensible arrow
window.MathJax = {
tex: {
inlineMath: [["$"."$"], ["\\("."\\)"]], // The in-line formula selector
displayMath: [["$$"."$$"], ["\ \ ["."\ \]"]], // An in-segment formula selector
packages: ['base'.'ams'.'mhchem'.'textmacros'.'color'.'extpfeil'.'amscd']
},
options: {
enableMenu: false.// Hide the right menu
skipHtmlTags: ["script"."noscript"."style"."textarea"."pre"."code"."a"].// Avoid certain tags
ignoreHtmlClass: "comment-content".
processHtmlClass: 'tex2jax_process'
},
loader: {
load: ['[tex]/mhchem'.'[tex]/textmacros'.'[tex]/color'.'[tex]/extpfeil'.'[tex]/amscd']
}
}
}
var script = document.createElement('script');
script.src = '/assets/polyfill/polyfill.min.js';
document.head.appendChild(script);
var script = document.createElement('script');
script.src = '/assets/lib/mathjax/es5/tex-svg.js';
document.head.appendChild(script);
}) ();
Copy the code- 4. How to process asynchronous data
As mentioned above, MathJax does not render a formula in isolation, but instead renders the entire page. There are many formulas in our project, it is impossible to re-render a formula page, so how do we deal with it?
We can add a global stabilizer, and if the render is performed again within 100ms, then start the timer again until it exceeds 100ms. For example, this is what we use in our VUE project:
mathJaxTexReset:
// Use the lodash anti-shake method
_.debounce(function(){
// Render function
this.$utils.mathJaxTexReset()
}, 100)
Copy the code
Afterword.
Here is just to write a simple use of MathJax tutorial, there are more rich content with you to explore ~
Thanks for watching.