如何设置 MathJax 2.7.8 的 CSS 配置以全局更改方程的文本颜色答案

【问题标题】：How to set CSS configuration of MathJax 2.7.8 to change text-color of equations globally如何设置 MathJax 2.7.8 的 CSS 配置以全局更改方程的文本颜色
【发布时间】：2020-08-28 06:28:34
【问题描述】：

我在一个项目中使用 mathjax，我一直在尝试更改所有数学的颜色。我正在加载以下配置文件：

window.MathJax = {
  jax: ['input/TeX', 'output/HTML-CSS'],
  extensions: ['tex2jax.js'],

  displayAlign: 'center',

  TeX: {
    extensions: ['AMSmath.js', 'AMSsymbols.js', 'AMScd.js'],
    Macros: {
      e: '{\\textrm{e}}',
      R: '{\\mathbb{R}}', // this is working!
      Z: '{\\mathbb Z}',
      KK: '{\\mathbb{K}}'
    }
  },
  tex2jax: {
    inlineMath: [
      ['$', '$'],
      ['\\(', '\\)']
    ],
    displayMath: [
      ['$$', '$$'],
      ['\\[', '\\]']
    ],
    processEscapes: true
  },
  'HTML-CSS': {
    fonts: ['TeX'],
    styles: {
      scale: 110,
      '.MathJax': { padding: '1em 0.1em', color: 'green ! important' }, //Not working
      '.MathJax_Display': { 'text-align': 'center' }
    }
  },
  showProcessingMessages: false,
  menuSettings: { zoom: 'Double-Click', mpContext: true, mpMouse: true }
}

显然一切正常，但 HTML-CCS:styles 部分不起作用。我找不到合适的参考，我不知道这个版本的 MathJax (2.7.8) 是否使用了不同的格式。在这个项目中，我使用的是 nuxt 和 vuetify，我不知道这是否是问题所在，但我关闭了 vuetify，但样式仍然没有应用于数学显示。非常感谢您的帮助，米尔顿。

【问题讨论】：

标签： css colors configuration styles mathjax

【解决方案1】：

我终于找到了问题所在。显然，新版本的 Mathjax 更改了 CSS 类的名称。现在可以使用以下配置：

更新：现在我面临一个不同的问题...该配置仅在开发模式下有效，当部署 mathjax css 时不起作用...在这种情况下，我认为它是 vuetify css。 :-(

更新：现在它正在工作，也在部署模式下。我正在使用预先配置的 ?config=TeX-AMS-MML_SVG 加载 Mathjax。当我在没有预先配置的情况下加载它时，它可以工作。我不知道为什么。

window.MathJax = {
  jax: ['input/TeX', 'output/CommonHTML'],
  extensions: ['tex2jax.js', 'Safe.js'],
  styles: {
    '.mjx-chtml': { padding: '0.1em 0.1em' }, //new names of the selectors, working!
    '.MJXc-display, .mjx-chtml': { color: 'green' }
  },
  displayAlign: 'center',

  TeX: {
    extensions: ['AMSmath.js', 'AMSsymbols.js', 'AMScd.js'],
    Macros: {
      e: '{\\textrm{e}}',
      R: '{\\mathbb{R}}',
      Z: '{\\mathbb Z}',
      KK: '{\\mathbb{K}}'
    }
  },
  tex2jax: {
    inlineMath: [
      ['$', '$'],
      ['\\(', '\\)']
    ],
    displayMath: [
      ['$$', '$$'],
      ['\\[', '\\]']
    ],
    processEscapes: true
  },
  CommonHTML: {
    scale: 105,
    linebreaks: { automatic: true }

  },
  showProcessingMessages: false,
  menuSettings: { zoom: 'None', mpContext: true, mpMouse: true }
}

请注意，样式位于 CommonHTML 项之外的核心配置中。谢谢您的帮助！米尔顿。

【讨论】：

【解决方案2】：

scale: 110 参数不是 CSS 声明，因此不应在 styles 块中（而应直接在 HTML-CSS 块中）。我怀疑这可能导致样式无法正确生成。尝试将scale 上移一级，看看是否有帮助。

请注意，HTML-CSS 输出 jax 是可用的最慢的。您可以考虑改用 CommonHTML 输出 jax。

【讨论】：