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

Question

我在一个项目中使用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，但样式仍未应用于数学显示。非常感谢您的帮助，米尔顿。

Answer 1

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

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

Answer 2

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

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项之外的核心配置中。谢谢您的帮助！米尔顿。