In content creation, especially when it involves the fields of science, technology, engineering, or mathematics (STEM), it is crucial to present mathematical formulas clearly and accurately.The traditional web content publishing is often difficult to directly present complex mathematical symbols, while AnQiCMS, with its powerful Markdown editor, combined with some simple configurations, can perfectly present your mathematical formulas on the web.

The design concept of AnQiCMS is to provide an efficient, user-friendly, and customizable content management solution.It has built-in support for Markdown syntax, which provides great convenience for handling text content with complex formats.When embedding mathematical formulas in Markdown, we usually use LaTeX syntax, but browsers themselves cannot parse these LaTeX codes directly.This is when you need to use a dedicated JavaScript library to render.MathJax is a powerful library that can convert mathematical formulas in LaTeX, MathML, or AsciiMath formats on web pages into high-quality typesetting effects.

The following are the detailed steps to ensure that your Markdown content's mathematical formulas are displayed correctly on the AnQiCMS website:

Step 1: Enable Markdown Editor

Firstly, you need to ensure that the Markdown editor feature of AnQiCMS backend is enabled. This is usually the basis for content publishing and editing.

Please log in to your AnQiCMS backend, navigate to the "Content Settings" page under "Global SettingsHere, you will find an option named “Enable Markdown Editor”.Please make sure to check this option and save the settings.Enabled, you can choose to use the Markdown editor to write content when creating or editing documents.

第二步：编写包含数学公式的Markdown内容 English

Markdown editor enabled, you can directly use LaTeX syntax to write mathematical formulas in the article. There are two main forms of LaTeX formulas:

  • Inline Formula (Inline Math)：Used to embed short formulas in text paragraphs, formulas are$enclosed by symbols. For example：当$a \ne 0$时，一元二次方程$ax^2 + bx + c = 0$的解为$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$。

  • Block Formula (Display Math):Used for displaying longer formulas that need to be shown on a separate line, the formula is$$enclosed by symbols. For example：

    黎曼ζ函数定义为：
$$
\zeta(s) = \sum_{n=1}^{\infty} \frac{1}{n^s}
$$

    After writing Markdown content containing formulas, remember to save and publish your document so that it can be validated on the front-end page later.

Third step: Introduce the MathJax library to support formula rendering

This is the most critical step, which allows the browser to understand and render the LaTeX formulas in your Markdown.Since the browser does not natively support LaTeX, we need to introduce the third-party library MathJax into the template files of the website.

The introduction of MathJax usually occurs in the public header template file of your website (such asbase.htmlThis file is usually located in your AnQiCMS template folder, for example/template/您的模板名称/base.html. You can edit the template online through the 'Template Design' feature of the AnQiCMS backend, or directly access the template files on the server via FTP/SSH.

请在base.htmlthe file<head>tag, add the following<script>Code snippet. Suggest placing it near<head>the end of the tag, but after any CSS file that might affect the page layout:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

The purpose of this code is to load the MathJax library from CDN (Content Delivery Network).asyncThe attribute ensures that the script download will not block page parsing, improving page loading speed.

To make your Markdown content visually appealing, you can choose to simultaneously introduce GitHub-style Markdown formatting:

<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" />

If you also need to display flowcharts in Markdown, you can also introduce the Mermaid library at the same time:

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

Please save after adding the above codebase.htmlfile.

Fourth step: Refresh cache and verify the effect

After modifying the template file, AnQiCMS system may have cache, and the browser will also retain the old cache.To ensure that the new configuration takes effect, we need to clear the cache.

  1. Clear AnQiCMS system cache:Login to the AnQiCMS backend, find the "Update Cache" feature, click to execute to clear the system cache.
  2. Clear browser cache:Open the web page where you have published a mathematical formula, and try to use it.Ctrl + F5(Windows/Linux) orCmd + Shift + R（macOS）Force a page refresh to clear browser cache.

Now, when you visit a page containing mathematical formulas again, you should be able to see that the LaTeX code has been correctly rendered by MathJax into beautiful mathematical formulas.

By following these simple steps, your AnQiCMS website can fully utilize the conciseness of Markdown and the powerful rendering capabilities of MathJax, clearly and professionally displaying various complex mathematical formulas, greatly enhancing the quality of content and the reading experience of users.

Common Questions (FAQ)

  1. Why does the mathematical formula still display as the original LaTeX code even though I followed the steps?This may be caused by several reasons: First, please confirm again whether you have correctly enabled the 'Markdown Editor' in the 'Content Settings' of AnQiCMS backend. Second, checkbase.htmlMathJax in the file<script>Is the label placed completely and correctly?<head>Area.Also, ensure that the network connection is normal so that the MathJax library can be loaded from the CDN.Finally, make sure to clear the AnQiCMS system cache and your browser cache, as sometimes old caches can prevent new configurations from taking effect.Additionally, check whether your LaTeX formula syntax is correct; incorrect syntax may also lead to rendering failure.

  2. Can I use mathematical formulas and flowcharts at the same time in Markdown?Of course you can.AnQiCMS supports the simultaneous introduction of both MathJax (used for mathematical formulas) and Mermaid (used for flowcharts) libraries.<script>Are all the labels added tobase.htmlthe file<head>

  3. Is there any other formula rendering library available besides MathJax?MathJax is one of the most popular and powerful web-based mathematical formula rendering libraries, supporting a wide range of LaTeX syntax and with good compatibility.Other common choices, apart from MathJax, include KaTeX.KaTeX usually renders faster than MathJax because it does not need to perform a large amount of DOM operations like MathJax, but it may be slightly inferior in supporting some advanced LaTeX features.For most AnQiCMS users, MathJax is already able to meet most needs, and its extensive community support and rich documentation make it a very reliable choice.