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

As an experienced security CMS website operator, I am well aware that the details of content presentation are crucial for user experience.Especially for websites that need to display mathematical formulas, ensuring the clarity, beauty, and consistency with the overall style of the website is an indispensable aspect of operation.The AnQi CMS has integrated Markdown editor in its new version 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.

Understand the rendering mechanism of MathJax and the integration method with AnQi CMS

Firstly, we need to clarify how MathJax works on the web.MathJax is a JavaScript library for displaying mathematical formulas on the web, which can convert mathematical expressions in LaTeX, MathML, or AsciiMath formats into high-quality HTML, SVG, or MathML, thus achieving consistent and beautiful display on various browsers and devices.Anqi CMS achieves automatic recognition and rendering of formulas by introducing MathJax CDN scripts in template files, which inhelp-markdown.mdMentioned in the document, that is, by adding inbase.htmla specific header in the file<script>the tag.

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

Render adjustments through the MathJax configuration object

MathJax provides a global configuration object, allowing for 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 MathJax configuration, we usually include the MathJax script<script>TagBeforeand define a name ofMathJaxThe global JavaScript object. For example, in Anqi CMS.base.htmlIn the file, you can add a configuration block before the line where you include 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.fontsOptions can affect the way MathJax selects TeX fonts. More direct font control is usually done through CSS.chtml.font-familyandsvg.font-familyYou can specify the font directly, but make sure that these fonts are available on the user's device or through CSS@font-faceIntroduced.
• Adjust the size:chtml.scaleandsvg.scaleThis is the most direct option to globally adjust the size of the formula. 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 adjustment: MathJax 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.

Adjust rendering through the CSS stylesheet.

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.The MathJax rendering of formulas generates specific HTML structures and CSS classes, which we can use to precisely control the styles.

You can add in the Anqi CMS template'sbase.htmlin the file<head>tag.<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: By.mjx-chtmlSelector settingsfont-familyCan effectively change the font of MathJax rendered formulas. Use!importantEnsure that your style takes precedence over MathJax's default style. Make sure that the font you specify is available on the user's system, or through@font-faceRules are introduced in CSS to use custom fonts.
• Adjust the size:font-sizeProperties can control the size of formulas. Due to the internal use of MathJax.emUnits can be adjusted through.mjx-chtmloffont-sizeCan make the relative size inside it change accordingly, achieving an overall scaling effect.
• Color adjustment:colorThe text color of the formula can be directly set. If you want the color of the formula to be consistent with the surrounding text, it is usually not necessary to make additional settings, but if you need to highlight or distinguish from other elements, adjustments can be made here.

Combine MathJax configuration with 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.scaleIt directly affects how MathJax calculates and layouts 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 formula styles with the brand image and design language of the website.

For example, you can usechtml.scaleMake a basic global size adjustment in the MathJax configuration, and then fine-tune the font family, specific colors, or more refined layout through CSS.After any modifications, 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

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

The strength of MathJax lies in its high customizability.By using the above method, you can finely control the visual presentation of mathematical formulas, making it perfectly integrate into your Aiqi CMS website content, providing an excellent reading experience.

Frequently Asked Questions (FAQ)

1. Why am I stillbase.htmladding MathJax script, but the mathematical formulas are still displayed as original LaTeX code?

First, make sure 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. Second, check if the path of the MathJax script you have included is correct, for example, `https://cdn.jsdelivr.net/npm/mathjax@3/es5/