How to adjust the font, size, or color of `MathJax` rendered mathematical formulas?

As an experienced CMS website operation person, I know that the details of content presentation are crucial for user experience.尤其是对于需要展示数学公式的网站，确保公式的清晰度、美观性与网站整体风格的统一性是运营中不可忽视的一环。The new version of AnQi CMS integrates the Markdown editor and supports rendering mathematical formulas through MathJax, which provides us with great convenience.However, enabling MathJax alone is not enough; we also need to further adjust its style to meet specific visual requirements.

Understanding the rendering mechanism of MathJax and the integration method with SafeCMS

Firstly, we need to clarify how MathJax works in web pages.MathJax is a JavaScript library for displaying mathematical formulas on the web, which can convert mathematical expressions in formats such as LaTeX, MathML, or AsciiMath into high-quality HTML, SVG, or MathML, thus achieving consistent and beautiful display across various browsers and devices.help-markdown.mdis mentioned in the document, that is, by adding specific things in thebase.htmlheader of the file<script>tags to achieve this.

Once the MathJax script is loaded, it scans the page content and finds content that is specially marked (such as$...$or$$...$$The mathematical formula and convert it to a displayable format.In this conversion process, we can intervene in the visual presentation of the formula in two main ways: one is through the configuration object of MathJax itself, and the other is by using CSS style sheets to override.

Adjust rendering through the MathJax configuration object

MathJax provides a global configuration object that allows us to make detailed settings before or after loading its library.For adjusting font, size and color, this configuration object is the preferred and efficient way, as it directly affects the rendering behavior of MathJax.

To adjust the configuration of MathJax, we usually define a named<script>tagspreviously.MathJaxThe global JavaScript object. For example, in the security CMS.base.htmlIn the file, you can add a configuration block before the line of script that introduces the MathJax CDN:

<script>
window.MathJax = {
  // 在这里添加您的MathJax配置
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']],
    displayMath: [['$$', '$$'], ['\\[', '\\]']],
    processEscapes: true,
    processEnvironments: true,
    // 字体设置
    // 可以指定使用特定的字体，例如 'STIX' 或 'STIXWeb'，
    // 或者指定为通用字体如 'sans-serif'，MathJax会尝试使用系统可用字体
    // 默认值通常是 'TeX' 或 'AMS' 等，依赖于您的MathJax版本和需求
    fonts: {
      // 示例：强制使用STIX字体，如果可用
      // 'STIX': true,
      // 'STIXWeb': true,
    }
  },
  // 对于HTML渲染（CHTML）的输出配置
  chtml: {
    // 调整公式的整体大小。1表示100%，1.2表示120%
    // 这将影响所有CHTML渲染的公式大小
    scale: 1, // 默认值，可以调整为例如 1.1 或 0.9
    // 字体家族，这会影响MathJax渲染的HTML元素的字体
    // 如果您想使用网站的通用字体，可以在CSS中设置，或在这里指定
    // 'font-family': 'Georgia, serif',
  },
  // 对于SVG渲染的输出配置
  svg: {
    // 调整公式的整体大小。与chtml.scale类似
    scale: 1,
    // 字体设置，如果使用SVG，MathJax会将字体路径嵌入SVG中
    // 'font-family': 'Georgia, serif',
  },
  // 通用配置，例如公式颜色
  // 颜色通常不在MathJax配置中直接全局设置，而是在公式内部使用TeX命令 \color{} 或通过CSS
  // 但是，如果需要为所有公式设置一个默认颜色，CSS是更灵活的选择。
  // 可以通过添加一个CSS类到公式容器，然后为该类设置颜色。
  // 例如，MathJax默认会生成 .MathJax_Display 和 .MathJax_CHTML 等类，我们可以利用CSS来修改它们的颜色。
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

In the above configuration:

• Font adjustment:tex.fontsThe option can affect the way MathJax selects TeX fonts. More direct font control is usually done through CSS.chtml.font-familyandsvg.font-familyIt can specify fonts directly, but make sure that these fonts are available on the user's device or through CSS.@font-faceImport.
• Adjust size:chtml.scaleandsvg.scaleis the option to directly adjust the size of the formula globally. Setting it to a value greater than 1 (such as 1.2) will enlarge the formula, while a value less than 1 (such as 0.9) will shrink the formula.
• Color adjustmentMathJax configuration does not have a direct global color setting. Usually, color adjustments are made within the formula using TeX commands (such as\color{red}{x^2}）or more flexibly through CSS.

Render adjustment through CSS style sheets.

For website operation, it is usually more flexible to adjust the font, size, and color of MathJax formulas through CSS style sheets, especially when you want the formula style to be consistent with the overall design of the website.MathJax rendered formulas generate specific HTML structures and CSS classes, which we can use to precisely control the styles.

You can add in the Anq CMS template.base.htmlin the file<head>tag within,<style>Block or link to an external CSS file, then write your custom CSS rules.

<head>
  <!-- 引入github-markdown-css，如果需要的话 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <style>
    /* 全局字体和大小调整示例 */
    /* .mjx-chtml 类通常用于MathJax渲染的公式容器 */
    .mjx-chtml {
      font-family: "Noto Serif SC", serif, "Times New Roman", Times, serif !important; /* 使用您网站的字体，并添加 !important 确保覆盖 */
      font-size: 1.1em; /* 调整公式相对于周围文本的大小 */
      color: #333333; /* 设置公式的默认颜色，例如深灰色 */
    }

    /* 如果公式是块级显示（$$...$$ 或 \[...\]），可能需要针对 .mjx-chtml.mjx-block 类进行调整 */
    .mjx-chtml.mjx-block {
      margin-top: 1em;    /* 调整块级公式的上下边距 */
      margin-bottom: 1em;
      text-align: center; /* 块级公式居中显示 */
    }

    /* 对于公式中的特定元素，例如分数线、根号等，MathJax会生成更细粒度的类，
       您可以通过浏览器开发者工具检查元素来发现并针对性调整 */
    /* 例如，调整分数线的颜色（这可能需要更复杂的选择器）*/
    .mjx-chtml .mjx-char {
        /* color: #666; 这会改变所有字符颜色 */
    }

    /* 针对使用SVG渲染的公式，可能需要调整 .MathJax_SVG 或类似类 */
    /* .MathJax_SVG {
        font-family: "Noto Serif SC", serif, "Times New Roman", Times, serif !important;
        font-size: 1.1em;
        color: #333333;
    } */

    /* 示例：为行内公式设置略小的字体或不同颜色 */
    mjx-container[display="false"] { /* 选择器可能因MathJax版本而异 */
        /* font-size: 0.95em; */
        /* color: #555; */
    }

  </style>
  <!-- MathJax 配置和脚本引入 -->
  <script>
  window.MathJax = {
    // ... MathJax 配置对象 ...
  };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>

In the above CSS example:

• Font adjustment: Through.mjx-chtmlSelector settingsfont-familyCan effectively change the font of MathJax rendered formulas. Use!importantEnsure that your styles take precedence over MathJax's default styles. Make sure that the font you specify is available on the user's system, or through@font-faceThe rule introduces custom fonts in CSS.
• Adjust size:font-sizeThe property can control the size of formulas. Since MathJax internally usually usesemunits, by adjusting.mjx-chtmloffont-sizeEnglish can make the relative size inside change accordingly, achieving an overall scaling effect.
• Color adjustment:colorThe text color can be directly set by the formula of the property.If you wish for the formula to match the color of the surrounding text, usually no additional settings are needed, but if you need to highlight or differentiate from other elements, you can adjust it here.

Combine the use of MathJax configuration and CSS styles.

As a website operator, you can flexibly combine these two methods according to your actual needs. The MathJax configuration object is more suitable for handling parameters at the rendering engine level, such as the overall scaling ratio of formulas (chtml.scale），it directly affects how MathJax calculates and lays out formulas.While CSS is more skilled at handling the details of visual presentation, such as font styles, colors, margins, etc., it allows you to closely integrate the formula styles with the brand image and design language of the website.

For example, you can utilizechtml.scaleMake a basic global size adjustment in the MathJax configuration, and then fine-tune the font family, specific color, or more detailed layout through CSS.After any modification, be sure to clear the browser cache and test multiple times to ensure that the display effect meets expectations on different devices and browsers.

Deployment and Testing

After modificationbase.htmlAfter the file, remember to save and ensure that the template file has been updated.Since browsers usually cache CSS and JavaScript files, you may need to force refresh the page (Ctrl+F5 or Cmd+Shift+R) or clear the browser cache to load the latest styles and configurations.At the same time, testing across different browsers and devices can ensure that your adjustments have good compatibility and consistency.

The power of MathJax lies in its high customizability.Through the above method, you can finely control the visual presentation of mathematical formulas, making it perfectly integrate into your security CMS website content, providing an excellent reading experience for readers.

---

Common Questions and Answers (FAQ)

1. Why does the mathematical formula still display as the original LaTeX code after I added the MathJax script inbase.html?

Firstly, please make sure that you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" of the AnQi CMS backend, as MathJax is usually used in conjunction with Markdown content. Secondly, check if the script path of the MathJax you introduced is correct, for example,https://cdn.jsdelivr.net/npm/mathjax@3/es5/English