使用 CSS 设置 MathJax 样式

Question

我对此很困惑。我搜索了教程，但找不到任何对我来说有意义的教程。

如何为 MathJax 输出设置 CSS 类？我只是想让字体变大。我的 HTML 底部当前包含的内容是：

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

这使得 TeX 很好，但我想在上面设置一些 CSS。理想情况下，我想将 CSS 类名传递给它。

Answer 1

您是否尝试过在输出处理器中设置

scale

选项？ 请参阅手册。 您可以在文件中或内联中设置配置选项； 本页涵盖了整个过程。

基本上，您可以在页面或包含的文件中包含一小段 JavaScript。 示例：

<script type="text/javascript">    
  MathJax.Hub.Config({    
    extensions: ["tex2jax.js"],    
    "HTML-CSS": { scale: 100}    
  });    
</script>

此外，您可以简单地将应用的 CSS 类包围在

div

中。 在此页面上查看源代码。

<div style="font-size: 500%;">    
\[

  g\frac{d^2u}{dx^2} + L\sin u = 0

\]    
</div>

方程将简单地继承字体大小。

Answer 2

更新：

据我现在了解到，不要使用 CSS 在 mathjax 中设置 TeX 的样式，这可能会导致显示问题。请参阅此处：https://github.com/mathjax/MathJax/issues/925

解决方案是使用 Javascript 和 Config 块：

<script type="text/x-mathjax-config"> 
    MathJax.Hub.Config({ 
        "HTML-CSS": { scale: 200, linebreaks: { automatic: true } }, 
        SVG: { linebreaks: { automatic:true } }, 
        displayAlign: "left" });
</script>

---

已过时：

我正在使用 JQuery 的 getScript() 动态加载 MathJax，只有在页面上有

$$

 的情况下。在这种情况下，上述解决方案不起作用。 

解决方法是在加载发生后设置 CSS：

$(".MathJax").css("font-size","150%"); 您还可以使用

%

 或 

px

 来代替 

em

 中的字体大小。

如果这不起作用，请对您的 CSS 样式使用 !important。例如：

.MathJax, .MathJax_Display  {
    text-align: left !important;
    font-size: 130%  !important;
}

Answer 3

从

MathJax 3 及更高版本开始，不再支持旧答案建议的 MathJax.Hub.Config()

 方法。相反，您应该使用 

window.MathJax

 对象来设置配置属性。

例如，要将 CommonHTML 输出中的字体大小缩放 50%，您可以使用：

<script>
  MathJax = {
    chtml: {
      scale: 1.5
    }
  };
</script>

有关更多信息，请参阅 MathJax.org 中的以下文档：

• 配置MathJax
  • 输出处理器选项：
    • CommonHTML 输出处理器选项
    • SVG 输出处理器选项
• 从 v2 升级到 v3