It is crucial to present mathematical formulas clearly and accurately when creating content, especially in the fields of science, technology, engineering, or mathematics (STEM).It is often difficult to directly present complex mathematical symbols in the traditional publication of web content, but AnQiCMS, with its powerful Markdown editor, combined with some simple configurations, can perfectly present your mathematical formulas on the web.

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

Here are the detailed steps to ensure that your Markdown mathematical formulas are displayed correctly on the AnQiCMS website:

Step 1: Enable Markdown editor

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

Please log in to your AnQiCMS backend, navigate to the 'Global Settings' under the 'Content Settings' page.Here, you will find an option called 'Enable Markdown Editor'.Please make sure to check this option and save the settings. After enabling it, you can choose to use the Markdown editor to compose content when creating or editing documents.

Step two: Write Markdown content containing mathematical formulas

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

  • Inline Math formula:Used to embed short formulas within a text paragraph, 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-level formula (Display Math):Used to display long formulas that need to be on a separate line, the formula is displayed in$$enclosed by symbols. For example:

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

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

Step 3: Introduce the MathJax library to support formula rendering

This is the most critical step, it allows the browser to understand and render the LaTeX formula in your Markdown.Because the browser does not natively support LaTeX, we need to introduce the third-party library MathJax in the website template file.

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.

Pleasebase.htmlthe file<head>tag, add the following.<script>Code snippet. It is recommended to place it near<head>the end of the tag, but after any CSS file that may affect the page layout:

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

This code is used to load the MathJax library from a CDN (Content Delivery Network).asyncThe attribute ensures that the script download does not block page parsing, thereby improving page loading speed.

To make your Markdown content visually appealing, you can choose to also 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 include the Mermaid library:

<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 code.base.htmlfile.

Step 4: Refresh the cache and verify the effect

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

  1. Clear AnQiCMS system cache:Log in to the AnQiCMS backend, find the 'Update Cache' feature, click to execute to clear the system cache.
  2. Clear the browser cache:Open the web page where you posted the mathematical formula and try to use itCtrl + F5(Windows/Linux) orCmd + Shift + R(macOS) Force refresh the page to clear the browser cache.

Now, visit the page containing mathematical formulas again, you should 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.

Frequently Asked Questions (FAQ)

  1. Why did I follow the steps, but the mathematical formula still displays as the original LaTeX code?This may be caused by several reasons: First, please confirm again whether you have enabled the 'Markdown Editor' correctly in the 'Content Settings' of the AnQiCMS backend. Second, checkbase.htmlthe MathJax in the file<script>Are the labels complete and correctly placed in<head>The area. Also, ensure that the network connection is normal so that the MathJax library can be loaded from the CDN.Finally, be sure to clear the AnQiCMS system cache and your browser cache, as sometimes old caches can prevent the new configuration from taking effect.In addition, check the syntax of your LaTeX formula, incorrect syntax may also cause rendering to fail.

  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 (for mathematical formulas) and Mermaid (for flowcharts) libraries.As shown in the third step of the article, you just need to match these libraries with the corresponding<script>All the labels are added tobase.htmlthe file<head>The region is sufficient. They operate independently, without interfering with each other, allowing you to flexibly combine mathematical formulas, code, and charts in the same Markdown article to enrich the expression of content.

  3. Can you choose other formula rendering libraries 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 good compatibility.Except MathJax, another common choice is KaTeX.KaTeX usually renders faster than MathJax because it does not require as much DOM manipulation as MathJax, but it may be slightly inferior in supporting some advanced LaTeX features.For most AnQiCMS users, MathJax is already able to meet most of their needs, and its extensive community support and rich documentation make it a very reliable choice.