In AnQiCMS template, mathematical formulas and flow charts are displayed correctly

As a website administrator focused on content operations, I fully understand the importance of high-quality content in attracting and retaining users.In some fields, such as education, technology, or scientific research, content often includes complex mathematical formulas or clear flowcharts.AnQiCMS as a flexible content management system, through the integration of Markdown editor, provides us with the possibility of elegantly presenting these complex elements on the web.Although AnQiCMS itself does not directly render these special contents, it allows us to easily introduce industry-standard third-party libraries to achieve this function.

This article will give a detailed introduction on how to configure and use these tools in AnQiCMS template, ensuring that your mathematical formulas and flowcharts are displayed correctly.

Enable AnQiCMS Markdown Editor

To start embedding mathematical formulas and flowcharts in your content, you first need to make sure that the AnQiCMS Markdown editor is enabled.This is the premise for parsing content in Markdown format, and it is also the basis for subsequent rendering of formulas and flowcharts.

Please log in to the AnQiCMS backend management interface and navigate to the "Content Settings" option under "Global Settings".In this page, you will find the option to enable or disable the Markdown editor.Please make sure to check or set it to enabled status, and then save the changes.Enabled, you can use Markdown syntax for content creation when creating or editing documents.

Configure MathJax to display mathematical formulas

The rendering of mathematical formulas usually requires professional JavaScript libraries to handle LaTeX or AsciiMath syntax.In AnQiCMS, we recommend using MathJax, which is a powerful and widely used formula rendering engine.

To integrate MathJax on your website, you need to edit the core files in the AnQiCMS template folder, usuallybase.htmlBecause this file will be inherited by most pages of the website.base.htmlthe file<head>Label within, add the following line of JavaScript reference.This will load the MathJax library from jsdelivr CDN, enabling it to parse and render mathematical expressions on the page.

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

Configuration completed, you can use LaTeX syntax to write mathematical formulas in Markdown content. For example, using$to enclose inline formulas (such as$E=mc^2$), or using$$The package performs block-level formulas (as shown below):

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Configure Mermaid to display flowcharts

For flowcharts, sequence diagrams, Gantt charts, and other diagrams, Mermaid provides a concise text syntax and can render them into beautiful graphics.To enable AnQiCMS to support Mermaid, you also need to include its JavaScript library in the template file.

Like MathJax, you should add the Mermaid reference tobase.htmlthe file<head>标签内。请添加以下JavaScript代码：

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

这段代码会以模块形式加载Mermaid库，并通过mermaid.initialize({ startOnLoad: true });Ensure the page is fully loaded before automatically scanning and rendering Mermaid diagrams.

In Markdown content, you can use special code blocks to define Mermaid diagrams. For example, a simple flowchart can be written like this:

mermaid
graph TD
    A[Start] --> B{Decision};
    B -- Yes --> C[Execute Operation];
    C --> D[End];
    B -- No --> E[Wait];
    E --> A;

Optimize the display style of Markdown content

To make your Markdown content, including formulas and flowcharts, visually more harmonious and professional, it is recommended to apply a set of beautiful styles.GitHub provides a set of excellent Markdown CSS styles, which we can easily introduce with CDN.

Inbase.htmlthe file<head>Add the following CSS reference after the adjacent stylesheet inside the tag:

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

Introduce this style and your Markdown content will have better formatting and readability on the web.

Content creation and publishing

After completing the above configuration, you can now use the Markdown editor in the AnQiCMS content management backend to create documents containing mathematical formulas and flowcharts.In editing, just follow the syntax rules of MathJax (LaTeX) and Mermaid.After publishing the document, these formulas and charts will be rendered correctly on the front-end page.

Please note that these features depend on external CDN resources, make sure that your server or the user's network environment can access these CDNs normally to ensure successful rendering.Also, it is recommended to preview the page when editing content to check if the formulas and charts are displayed as expected.

Common Questions and Answers (FAQ)

Question: I have added the script according to the steps, but the mathematical formulas and flowcharts still do not display. Why is that?答：Firstly, please make sure that you have enabled the Markdown editor in the 'Global Settings' -> 'Content Settings' of AnQiCMS backend.Next, check whether the MathJax (LaTeX) and Mermaid syntax you use in the content are correct without any errors, any syntax error may lead to rendering failure.Finally, confirm that the CDN links for MathJax and Mermaid are correct and accessible. Sometimes network issues or CDN service anomalies can also affect loading.

问：Can I host the MathJax and Mermaid files on my own server instead of using CDN?答：Of course. You can download the release files from the official websites of MathJax and Mermaid, and then upload these files to the AnQiCMS template directory./public/static/In the path of other custom static resources. After that, you just need to modifybase.htmlthe corresponding one in<script>TagssrcProperty, point to the local hosted file path. This can improve the stability of loading speed, but you need to manage file updates yourself.

问：How to customize the style of my mathematical formulas and flowcharts?答：For MathJax, it itself provides a rich set of configuration options, you can configure it via JavaScript code after the MathJax script is loaded, such as changing the font, color, or rendering method of formulas. For Mermaid, it supports different themes (theme）Set，canmermaid.initialize()be specified，formermaid.initialize({ startOnLoad: true, theme: 'dark' });.In addition，you can also cover the default rendering effect through custom CSS styles to meet specific design requirements.