Configuration notes for front-end integration Mathjaxjs

This article is a small tutorial that I have added to the PINGHSU theme to add mathematical formulas, including a lot of my official document reading after the practice, followed by this configuration tutorial go, you can do to any one need mathematical formula of the site to add support.

The tutorial as described in the title is for Mathjax practice, I simply understand KaTex, is also a good choice.

Mathjax Introduction

Mathjax is an open-source mathematical symbol rendering engine running in the browser, using Mathjax to easily display mathematical formulas in the browser without the need to use a picture. Currently, Mathjax can parse the markup language of latex, MathML, and Asciimathml. (Wiki)

Introduction of Mathjax

In the footer, introduce the official CDN

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

The official CDN JS in the domestic visit slow, so we generally introduce is the domestic public resources CDN provided by JS, here Special thanks Bootcdn

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

But this JS will still be called to cdn.mathjax.org in some configuration js file, we'd better add a dns-prefetch in the head, for Web acceleration, to learn more can access my other article: here

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

External config description

We introduced Mathjax and found that there was more behind the link.?config=TeX-AMS-MML_HTMLorMML

This extra thing is actually telling Mathjax that we're going to use the called TeX-AMS-MML_HTMLorMML.js configuration file, which controls the display of the HTML display output of the mathematical formula

This configuration file can also be obtained via CDN, 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>

Unfortunately BOOTCDN did not provide this JS, MathJax.js also use other JS, these JS are from the official CDN, so this is also explained above why we need to accelerate the official CDN

Below is a description of the official more detailed TeX-AMS-MML_HTMLorMML configuration file

This configuration file was 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 Amsmat H, Amssymbols, Noerrors, and noundefined TeX extensions, both the native MathML and HTML-WITH-CSS output processor Definit Ions, 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, whic h is normally loaded on demand.

For more profile information, see: Here

http://docs.mathjax.org/en/la ...

Inline Config description

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

It is easy to use <script></script> tag pairs, but note that you need to declare the type type="text/x-mathjax-config" . For this inline configuration to take effect before the singles Theater MathJax.js , the example is as follows

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

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

Recognition formula

We can MathJax.Hub.Config() realize the tex2jax formula recognition through the middle.

The official example is as follows

 <script type= "Text/x-mathjax-config" > MathJax.Hub.Config ({tex2jax: {inlinemath: [ ' $ ',  ' $ '], [ "\ \ (",  "\ \)"], Displaymath: [[ ' $$ ', Span class= "hljs-string" > ' $$ '], [ "\\[",  "\ \]"]}}); </script><script type=" Text/javascript "src=" path-to-mathjax/mathjax.js "></SCRIPT>        

Which inlineMath recognizes the mathematical formula within a single line, we can pass $ ... $ or \( ... \) go to recognize this mathematical formula

The effect is as follows:

Whenane0 , there is and solutions to(ax2+bx+c=0)

Then it displayMath is the mathematical formula that identifies the entire independent paragraph and is centered, and we can pass $$ ... $$ or \[ ... ])新视觉影院6080 identify the mathematical formula.

The effect is as follows:

X=?Bpm sq rt b24a co ve r2 a

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 the formula

But there will be two $$ of cases of accidental injury, do not worry, first read, you know how to solve the

Region selective recognition constraint recognition range

Our mathematical formula is usually in the article, then how to achieve only in the article label on the inside to do formula recognition, as follows

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

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

We want to constrain the scope of the recognition, the official document tells us MathJax.Hub.Queue that the third parameter is the recognition range, and the code above tells us to do the formula recognition in the ID post-content tag.

Avoid special tags and class

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]);

Which skipTags is used to avoid some special tags, here to avoid is,,,,, script noscript style textarea pre code , a the label inside

ignoreClassUsed to avoid the CSS class attribute declared in the tag, which is avoided with class="class1" the tag inside

If we don't want Mathjax to recognize the formula in the commentary, we can use it.ignoreClass

If there are multiple classes that need to be circumvented, we can use | them to differentiate and write ignoreClass: "class1|class2" based on the

More

For more tex2jax configuration information access: here

Beautify the mathematical formula and remove the blue box

As shown, there is a blue border around when you click the formula, and we can remove it by adding CSS, as follows

.MathJax{outline:0;}

If you want to change the font size, follow

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

Extended Functionality

In order to better achieve the beautification of the mathematical formula, we need to expand 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 the available fonts again, as follows

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

We're going to close the formula right-click menu

Also in HTML-CSS add settings, as follows

"HTML-CSS": {    showMathMenu: false}

Remove loading information

Mathjax.jsAt the time of loading, we can see the loading situation in the lower left corner of the webpage, can be removed directly in the MathJax.Hub.Config() configuration, as follows

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

Finishing

Here I organize two parts can be integrated into the theme of the code, please modify according to their own needs, I use the first copy

Organize a

<script type="Text/x-mathjax-config" >mathjax.hub.config ({showprocessingmessages:False, Messagestyle:"None", Extensions: ["Tex2jax.js"], Jax: ["Input/tex","Output/html-css"], Tex2jax: {inlinemath: [["$","$"]], Displaymath: [["$$","$$"], skiptags: [' Script ',' NoScript ', ' style ',  ' textarea ',  ' pre ',  ' code ',  ' a '], Ignoreclass: " Comment-content "}, " Html-css ": {availablefonts: [" STIX ",  "TeX"], Showmathmenu: false}); MathJax.Hub.Queue ([ "typeset", Mathjax.hub]);  </script>< script src=//cdn.bootcss.com/ MATHJAX/2.7.0/MATHJAX.JS?CONFIG=TEX-AMS-MML_HTMLORMML ">< /SCRIPT>           

Finishing Two

<script type="Text/x-mathjax-config" >var mathId =document.getElementById ("Post-content"); MathJax.Hub.Config ({showprocessingmessages:False, Messagestyle:"None", Extensions: ["Tex2jax.js"], Jax: ["Input/tex","Output/html-css"], Tex2jax: {inlinemath: [["$","$"]], Displaymath: [["$$","$$"], skiptags: [' Script ',' NoScript ',' Style ',' TextArea ', ' pre ',  ' code ',  ' a '], ignoreclass:< Span class= "hljs-string" > "Comment-content"},  "Html-css": {availablefonts: [" STIX ", " TeX "], Showmathmenu: false}}); MathJax.Hub.Queue ([ "typeset", Mathjax.hub,mathid]);  </script> <script src= "//www.bsck.org  cdn.bootcss.com/mathjax/2.7.0/mathjax.js?config=tex-ams-mml_htmlormml" >< Span class= "javascript" ></SCRIPT>    

Fixed a conflict with Instantclick

The code is as follows

Suitable for collating one's code

<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>

The code for finishing two

<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>

Configuration notes for front-end integration Mathjaxjs