📌  相关文章
📜  mathJax - Html (1)

📅  最后修改于: 2023-12-03 15:32:50.544000             🧑  作者: Mango

MathJax - HTML

MathJax is an open-source JavaScript display engine that allows you to include complex mathematical expressions in web pages. It works using HTML and CSS and supports several markup languages, including LaTeX.

With MathJax, programmers can create sophisticated mathematical notation and equations directly in HTML, without the need for additional software or plugins. This makes it easy to add math to any website or application.

Getting Started with MathJax

To use MathJax in your web page, you need to include the MathJax script in the head section of your HTML document:

<head>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.1.2/es5/tex-chtml.min.js" integrity="sha384-VTfDLzPX41YZO+TP6C9teQQ2dgLkceJXi69wSZO6y1el6AdYU6JVPflCcGGZPv6H" crossorigin="anonymous"></script>
</head>

Once MathJax is included, you can then use LaTeX syntax to write mathematical expressions in your HTML document. For example:

$f(x)=\sum_{n=0}^{\infty}\dfrac{f^{(n)}(a)}{n!}(x-a)^n$

This expression will be rendered by MathJax as:

$f(x)=\sum_{n=0}^{\infty}\dfrac{f^{(n)}(a)}{n!}(x-a)^n$

MathJax Configuration Options

MathJax provides several configuration options that allow you to customize its behavior. These options can be specified in the MathJax configuration object, which is declared in the head section of your HTML document:

<head>
  <script type="text/javascript">
    window.MathJax = {
      tex: {
        inlineMath: [['$', '$']],
        displayMath: [['$$', '$$']],
        processEscapes: true
      },
      svg: {
        fontCache: 'global',
        scale: 1.2,
        minScaleAdjust: 50
      },
      options: {
        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    };
  </script>
</head>

Here, we have specified some common MathJax configuration options:

  • tex.inlineMath and tex.displayMath: These options specify the delimiters used to denote inline and display math expressions, respectively.
  • tex.processEscapes: This option enables LaTeX-style escaping of special characters in text.
  • svg.fontCache, svg.scale, and svg.minScaleAdjust: These options control the SVG output of MathJax.
  • options.skipHtmlTags: This option specifies a list of HTML tags that MathJax should skip when processing math expressions.
Conclusion

MathJax is a powerful tool for displaying mathematical expressions in web pages. Its use of HTML and CSS makes it easy to integrate with any website or application. With MathJax, programmers can create sophisticated math notation and equations using LaTeX syntax directly in HTML.