MathJax 在所有浏览器中的漂亮数学 - CSS

简介

MathJax是一个开源的JavaScript库，用于在Web浏览器中呈现数学公式。它可以在任何浏览器中自动提供高质量的公式呈现，包括数学符号，及其解释或自定义样式。本文将介绍如何使用CSS效果使MathJax渲染的数学公式更加漂亮。

步骤

步骤1：安装MathJax

MathJax可以像其他JavaScript库一样通过CDN引入，也可以下载安装到自己的本地服务器。

CDN引入：

在HTML中加入以下代码：

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>

下载安装：

到MathJax官网下载MathJax，然后将MathJax的文件夹复制到你的项目中。

步骤2：编写CSS样式

在HTML文件中加入如下CSS代码：

.mathjax {
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.6;
  font-size: 1.2em;
}

.MathJax_Display {
  margin: 0.5em 0;
  display: block!important;
  border: none!important;
  padding: 0!important;
  text-indent: 0!important;
}

.MathJax_Display:after {
  content: "";
  display: block;
  clear: both;
}

.MathJax_Display .MJXc-display {
  margin: 0!important;
  text-align: center!important;
  display: table!important;
  width: auto!important;
}

.MathJax_Display .MJXc-display:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 50%;
  vertical-align: middle;
}

.MathJax_Display .MJXc-math {
  display: inline-block;
  vertical-align: middle;
}

步骤3：应用CSS样式

<!-- 在head中加入以下代码 -->
<style>
  /* 写入上述CSS样式 */
</style>

步骤4：使用MathJax渲染公式

在HTML文件中引入MathJax库之后，在需要渲染数学公式的地方放置公式代码，如下所示：

<div class="mathjax">
  $$
  \lim_{n \to \infty} \sum_{i=1}^n \frac{1}{n+i} = \ln2
  $$
</div>

其中$$包裹的是数学公式。使用\\转义LaTeX标记，并使用单个美元符号$包裹简单的数学公式。

步骤5：效果展示

在浏览器中查看效果，你会看到你的公式已经漂亮地呈现在页面上了。

结论

MathJax是一个功能强大、易于使用的数学公式渲染工具。使用CSS可以为渲染出来的数学公式增加更多样式和美观度。本文介绍了如何使用CSS为MathJax渲染出来的数学公式添加样式，使它更加漂亮和易于阅读。