Article pictures are stored inGitHubFor those of you with poor Internet speed, here it isMathJax: Making the Front End Support Mathematical FormulasOr come to my tech stationgodbmw.com

1. Must say

1.1 Development Background

Bloggers use personal blogs developed by Vue, which are written using Markdown syntax and handed to the front-end for rendering. To make it easier to explain, you need a LaTex mathematical formula that supports the front end and a nice rendering style.

1.2 Effect Display

Mathematical formulas are divided into inline and cross-line formulas, which of course require support and rendering.

I have prepared three formulas, which are intra-line formula, cross-line formula and super-long cross-line formula:

$\alpha+\beta=\gamma$ ? \alpha+\beta=\gamma? ? \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}?Copy the code

This article tests the address is: https://godbmw.com/passage/12. The effect picture is as follows:

2. Use MathJax

2.1 introduced the CDN

Before using MathJax, you need to import through the CDN by adding the following in the tag:

2.2 configuration MathJax

Encapsulate the configuration of MathJax into a function:

let isMathjaxConfig = false; // Prevent repeated calls to Config from causing performance loss

const initMathjaxConfig = (a)= > {
  if (!window.MathJax) {
    return;
  }
  window.MathJax.Hub.Config({
    showProcessingMessages: false.// Close the js loading process information
    messageStyle: "none".// No information is displayed
    jax: ["input/TeX"."output/HTML-CSS"].tex2jax: {
      inlineMath: [["$"."$"], ["\\("."\\)"]], // Inline formula selector
      displayMath: [["?"."?"], ["\ \ ["."\ \]"]], // The formula selector in the segment
      skipTags: ["script"."noscript"."style"."textarea"."pre"."code"."a"] // Avoid certain tags
    },
    "HTML-CSS": {
      availableFonts: ["STIX"."TeX"].// Optional font
      showMathMenu: false // Turn off the right click menu display}}); isMathjaxConfig =true; // 
};
Copy the code

2.3 Rendering using MathJax

MathJax provides window.mathJax.hub.queue to perform rendering. After performing the text fetch operation, perform the render operation:

if (isMathjaxConfig === false) { // If: MathJax is not configured
  initMathjaxConfig();
}

// If no third argument is passed, the entire document is rendered
// Because Vuejs are used, #app is specified to increase speed
window.MathJax.Hub.Queue(["Typeset", MathJax.Hub, document.getElementById('app')]);
Copy the code

2.4 Changing the default Style

The MathJax default style will have a blue border when focused. For extremely long mathematical formulas, the x direction will also overflow.

Add the following style code to override the original style to solve the above problem:

/* MathJax v2.7.5 from 'cdnjs.cloudflare.com' */
.mjx-chtml {
  outline: 0;
}
.MJXc-display {
  overflow-x: auto;
  overflow-y: hidden;
}
Copy the code

3. Precautions

3.1 Do not Usenpm

Do not use NPM, there will be an error, Google round but did not find a solution, github source address has the corresponding issue has not been resolved.

Bloggers have repeatedly tried but failed to find a solution, waiting for version updates and guidance from the gods.

3.2 Dynamic Data

In the SPA single-page application, the data is retrieved via Ajax. In this case, render needs to be performed after the data is retrieved.

If you’re used to ES5, you can call window.mathJax.hub.queue in the callback function. Es6 is recommended, however, with promises and async/await to avoid “callback territory”.

3.3 Version Issues

The second part of the style overrides the class name differently for different versions of MathJax or for different CDNS. For example, in THE V2.7.0 version of CDNBoot, the style override code would look like this:

/* MathJax v2.7.0 from 'cdn.bootcss.com' */
.MathJax {
  outline: 0;
}
.MathJax_Display {
  overflow-x: auto;
  overflow-y: hidden;
}
Copy the code

4. More information

  • Front end integration with MathjaxJS configuration notes
  • Mathjax website
  • Mathjax Chinese documentation