样式化MathJax

Question

我对这个问题感到非常困惑。我搜索了很多教程，但是没有一个让我完全理解。如何为MathJax输出设置CSS类？我只想让字体变大。当前的包含代码如下：

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

我的页面底部。可以正常渲染TEX，但是我想对它设置一些CSS！

理想情况下，我想传递一个CSS类名给它。

- Tom Gullen

---

来自未来的提示：cdn.mathjax.org 即将到达生命周期的尽头，请查看 https://www.mathjax.org/cdn-shutting-down/ 以获取迁移提示。 - Peter Krautzberger

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>

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

- asthasr

---

谢谢，但我不知道在哪里设置这些选项，我完全迷失了。 - Tom Gullen

我添加了一个链接到另一个页面，该页面涵盖了该过程。 - asthasr

我已经浏览了那些网页，你提供的那个页面没有告诉我如何改变字体大小。 - Tom Gullen

它绝对可以。它告诉你要设置比例选项。它向你展示如何设置比例。我链接的最后一个甚至有一个包含<div>的更简单的解决方案。 - asthasr

好的，谢谢，但是最后那个链接是在我的最后一条评论之后添加的，对于误解我感到抱歉。 - Tom Gullen

是的，对不起；我在发布配置手册链接后才注意到“演示”部分下的示例。但我要说，学习使用配置文件是值得的；因为你可以设置很多选项。 - asthasr

Answer 2

更新：

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

解决方法是使用JavaScript与配置块：

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

- Avatar

---

谢谢您。我测试了所有浏览器，除了移动设备上的Safari之外，其他都正常工作。有没有办法让字体大小在这种情况下也能起作用？编辑：发布后不到一分钟我就自己找到了答案，因为出于某种原因我经常会这样做。基本上只需要在MathJax.Hub.Config内添加另一行即可：CommonHTML: { scale: 150, linebreaks: { automatic: true } }, - user6096242

嗨，谢谢。看起来 CommonHTML: { scale: 150, linebreaks: { automatic: true } }, 可以缩放数学公式，但奇怪的 "HTML-CSS": { scale: 200, ... 在我的 Markdown 编辑器（ghostwriter）上不起作用。 - ollydbg23

由于内联样式，它对我不起作用：<span id="MathJax-Element-3-Frame" class="mjx-chtml MathJax_CHTML" tabindex="0" style="font-size: 121%; ...</span>。如果我在Chrome中按Ctrl-F5，则字体大小为101％；只需按F5即可达到121％。 - coder.in.me