具有html背景和字体颜色问题的MathJax

时间:2017-08-06 00:07:12

标签: latex mathjax mathml

在使用html背景和字体颜色时,html文件在显示模式下不显示LaTex表达式(分数a / b)。此外,在内联模式下,使用背景和字体颜色,分母可以相当多地切割下边缘(如下图所示)。感谢您给我们MathJax,因为它在我们工作的许多方面对我们有很大的帮助。

Html文件

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML">
</script>
</head>
<body>
A \(\frac{a}{b}\) fraction in inline mode
<br/>
A\[\frac{a}{b}\] fraction in display mode
<br/>
A <span style='color:white;background:black'>\(\frac{a}{b}\)</span> fraction in inline mode with black background and white font
<br/>
A <span style='color:white;background:black'>\[\frac{a}{b}\]</span> fraction in display mode with black background and white font. This one is not displaying fraction.

</body>
</html>

在IE 11和Chrome上显示

enter image description here

1 个答案:

答案 0 :(得分:0)

您可以将<span style='color:white;background:black'>更改为<span class='inverted'>并将此CSS代码添加到样式表中来解决此问题

.inverted .math {
    color: white;
    background-color: black;
}

您可能还会发现CSS Style Objects有用。

修改

添加此CSS的一种方法是更改​​<head>标记内的代码,如下所示:

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>
  <style type="text/css">
    .inverted .math {
      color: white;
      background-color: black;
    }
  </style> 
</head>

我还强烈建议您学习CSS的基础知识(至少),w3schools tutorials可能真的很有帮助。