JavaScript Mathjax

This article is a small tutorial for me to add mathematical formula function to Pinghsu topic, including my practice after reading a lot of official documents. Follow this configuration tutorial, you can add support to any site that needs mathematical formula.

Tutorials are for Mathjax Let me briefly understand the practice of KaTex , is also a good choice.

About MathJax

MathJax is an open source mathematical symbol rendering engine running in the browser. MathJax can easily display mathematical formulas in the browser without using pictures. At present, MathJax can parse the markup languages of Latex, MathML and ASCII MathML. (Wiki)

Introducing MathJax

In the footer, introduce the official cdn

 <script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

The official cdn's js are slow to access in China, so we generally introduce js provided by the domestic public resource cdn. Here, we would like to thank BootCDN

 <script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

However, this js will still call some configuration js files in cdn.mathjax.org. We'd better add a dns prefetch in the head for web page acceleration. For more information, please visit my other article: here

 <link rel="dns-prefetch" href="//cdn.bootcss.com" />

 <link rel="dns-prefetch" href="//cdn.mathjax.org" />

Description of external config

We introduced MathJax and found that there were more links ? config=TeX-AMS-MML_HTMLorMML

This extra thing actually tells MathJax that what we need is TeX-AMS-MML_HTMLorMML.js Configuration file of, which is used to control the HTMl display output for displaying mathematical formulas

This configuration file can also be obtained through the specified URL. The official example is as follows

 <script type="text/javascript" src=" https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX -AMS_HTML, http://myserver.com/MathJax/config/local/local.js "> </script>

MathJax.js Other js are also used. These js come from the official cdn, so this also explains why we need to speed up the official cdn

The following is more official TeX-AMS-MML_HTMLorMML Description of the configuration file

This configuration file is the most general of the pre-defined configurations. It loads all the important MathJax components, including the TeX and MathML preprocessors and input processors, the AMSmath, AMSsymbols, noErrors, and noUndefined TeX extensions, both the native MathML and HTML-with-CSS output processor definitions, and the MathMenu and MathZoom extensions.

In addition, it loads the mml Element Jax, the TeX and MathML input jax main code (not just the definition files), as well as the toMathML extension, which is used by the Show Source option in the MathJax contextual menu. The full version also loads both the HTML-CSS and NativeMML output jax main code, plus the HTML-CSS mtable extension, which is normally loaded on demand.

For more profile information, see: here

Inline config description

At the same time, the official also provides a function that allows us to inline a configuration option

It's easy to use <script></script> Label pair, but note that you need to declare the type type="text/x-mathjax-config" 。 If you want this inline configuration to take effect, you must place it in MathJax.js Previously, examples were as follows

 <script type="text/x-mathjax-config"> MathJax. Hub. Config({ }); </script> <script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>

among MathJax. Hub. Config() The configuration options in are the focus of this article

Identification formula

We can MathJax. Hub. Config() in tex2jax To realize formula recognition

Official examples are as follows

 <script type="text/x-mathjax-config"> MathJax. Hub. Config({ tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ] } }); </script> <script type="text/javascript" src="path-to-MathJax/MathJax.js"></script>

among inlineMath We can identify the mathematical formula in a single line by $ ... $ or \\( ... \\) To identify this mathematical formula

The effect is as follows:

When \( a \ne 0 \), there are two solutions to \( (ax^2 + bx + c = 0) \)

that displayMath It is to identify the mathematical formula of the entire independent paragraph and display it in the center $$ ... $$ or \\[ ... \\] To identify this mathematical formula

The effect is as follows:

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

In the Chinese world, we often like to use () or [] to comment or circle important fields, so in general, we do not need \( ... \) and \[ ... \] To identify formula

But there are also two $$ Don't worry. You will know how to solve the problem after reading it first

Area selective identification

Constraint recognition range

Our mathematical formulas are usually in articles, so how to realize formula recognition only in the tag pair of articles is as follows

 var mathId = document.getElementById("post-content"); MathJax. Hub. Config({ tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ] } }); MathJax. Hub. Queue(["Typeset",MathJax.Hub,mathId]);

By default, MathJax. Hub. Queue(["Typeset",MathJax.Hub]) It identifies the entire DOM tree

We need to restrict the identification range, and the official documents tell us MathJax. Hub. Queue The third parameter of is the identification range. The code above tells us to set the ID as post-content Do formula identification in the label of

Avoid special labels and classes

Is there any other way?

Yes, that is to avoid some special tags or classes, as follows

 MathJax. Hub. Config({ tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'], ignoreClass:"class1" } }); MathJax. Hub. Queue(["Typeset",MathJax.Hub]);

among skipTags It is used to avoid some special labels script , noscript , style , textarea , pre , code , a Inside the label of

ignoreClass It is used to avoid the CSS Class attribute declared in the tag class="class1" Inside the label of

If we don't want mathjax to recognize the formula in comments, we can use ignoreClass

If multiple classes need to be avoided, we can use | To distinguish, write ignoreClass: "class1|class2" It's OK

more

Get more tex2jax Configuration information access for: here

Beautify mathematical formula

Remove the blue box

As shown in the figure above, there is a blue border around the formula when you click it. We can remove it by adding CSS, as shown below

 .MathJax{outline:0;}

If you want to change the font size, as follows

 .MathJax span{font-size:15px;}

If the formula is too long, it will overflow. The solution is as follows

 .MathJax_Display{overflow-x:auto;overflow-y:hidden;}

Extended functions

In order to better beautify the mathematical formula, we need to expand it MathJax. Hub. Config() , as follows

 MathJax. Hub. Config({ extensions: ["tex2jax.js"], jax: ["input/TeX", "output/HTML-CSS"], tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], skipTags: ['script', 'noscript', 'style', 'textarea', 'pre','code','a'], ignoreClass:"class1" }, "HTML-CSS": { } }); MathJax. Hub. Queue(["Typeset",MathJax.Hub]);

We can HTML-CSS Add available fonts as follows

 "HTML-CSS": { availableFonts: ["STIX","TeX"] }

We need to close the formula right-click menu in the following figure

Also in HTML-CSS Add settings as follows

 "HTML-CSS": { showMathMenu: false }

Remove loading information

Mathjax.js When loading, we can see the loading situation in the lower left corner of the page, and we can directly MathJax. Hub. Config() Remove the configuration in, as shown below

 MathJax. Hub. Config({ showProcessingMessages: false, messageStyle: "none" });

arrangement

Here I sort out two pieces of code that can be integrated into the theme. Please modify them according to your own needs and briefly comment

Tidy up one

 <script type="text/x-mathjax-config"> MathJax. Hub. Config({ ShowProcessingMessages: false,//Close the js loading process information MessageStyle: "none",//No message is displayed extensions: ["tex2jax.js"], jax: ["input/TeX", "output/HTML-CSS"], tex2jax: { InlineMath: [['$', '$'], ["  (", " )"],//In line formula selector DisplayMath: [['$$', '$$'], ["  [", " ]"]],//formula selector in section SkipTags: ['script ',' noscript ',' style ',' textarea ',' pre ',' code ',' a '],//Avoid some tags IgnoreClass: "comment content"//Avoid the label containing this class }, "HTML-CSS": { AvailableFonts: ["STIX", "TeX"],//Optional fonts ShowMathMenu: false//Close the right-click menu display } }); MathJax. Hub. Queue(["Typeset",MathJax.Hub]); </script> <script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

Arrangement II

 <script type="text/x-mathjax-config"> var mathId = document.getElementById("post-content"); // Select formula recognition range MathJax. Hub. Config({ ShowProcessingMessages: false,//Close the js loading process information MessageStyle: "none",//No message is displayed extensions: ["tex2jax.js"], jax: ["input/TeX", "output/HTML-CSS"], tex2jax: { InlineMath: [['$', '$'], ["  (", " )"],//In line formula selector DisplayMath: [['$$', '$$'], ["  [", " ]"]],//formula selector in section SkipTags: ['script ',' noscript ',' style ',' textarea ',' pre ',' code ',' a ']//Avoid some tags }, "HTML-CSS": { AvailableFonts: ["STIX", "TeX"],//Optional fonts ShowMathMenu: false//Close the right-click menu display } }); MathJax. Hub. Queue(["Typeset",MathJax.Hub,mathId]); </script> <script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

Matched css

 .MathJax_Display{overflow-x:auto;overflow-y:hidden;} .MathJax{outline:0;}

InstantClick callback

The code is as follows

Code applicable to sorting one

 <script data-no-instant> InstantClick.on('change', function(isInitialLoad){ if (isInitialLoad === false) { if (typeof MathJax !== 'undefined'){ MathJax. Hub. Queue(["Typeset",MathJax.Hub]); } } }); InstantClick.init(); </script>

Code applicable to sorting II

 <script data-no-instant> InstantClick.on('change', function(isInitialLoad){ if (isInitialLoad === false) { if (typeof MathJax !== 'undefined'){ var mathId = document.getElementById("post-content"); MathJax. Hub. Queue(["Typeset",MathJax.Hub,mathId]); } } }); InstantClick.init(); </script>

epilogue

It's been written for a long time···

I will also write another article on mathematical formula grammar···

This article is written by Chakhsu Lau Creation, adoption Knowledge Sharing Attribution 4.0 International License Agreement.
All articles on this website are original or translated by this website, except for the reprint/source. Please sign your name before reprinting.