Properly display mathematical formulas and flowcharts in AnQiCMS template

As a website administrator focused on content operation, I fully understand the importance of high-quality content for 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 the 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, first make sure that the AnQiCMS Markdown editor is enabled.This is the premise of parsing content in Markdown format, as well as 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".On this page, you will find the option to enable or disable the Markdown editor.Please make sure to check or set to enabled and then save the changes.After enabling, you can use Markdown syntax to create content when creating or editing documents.

Configure MathJax to display mathematical formulas

The rendering of mathematical formulas usually requires specialized 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.htmlThis file will be inherited by most pages of the website.base.htmlthe file<head>Add the following JavaScript reference line inside the tag.This will load the MathJax library from the 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>

After configuration, you can use LaTeX syntax to write mathematical formulas in Markdown content. For example, use$to enclose inline formulas (such as$E=mc^2$), or use$$Enclose 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 charts, 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 reference to Mermaid'sbase.htmlthe file<head>Inside the tag. Please add the following JavaScript code:

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

This code will load the Mermaid library in module form and thenmermaid.initialize({ startOnLoad: true });Make sure the Mermaid chart is scanned and rendered automatically after the page is fully loaded.

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

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

Optimize the display style of Markdown content

In order to make your Markdown content, including formulas and flowcharts, visually more coordinated and professional, it is recommended to apply a set of beautiful styles to them.GitHub provides a set of excellent Markdown CSS styles, which we can easily include via CDN.

Inbase.htmlthe file<head>Add the following CSS reference immediately after other style sheets in 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" />

After introducing this style, your Markdown content will have better formatting and readability on the web.

Content creation and publication

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

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

Frequently Asked Questions (FAQ)

Question: I have added the script according to the steps, but the mathematical formulas and flowcharts still do not display. Why is that?Answer: First, make sure you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" of the AnQiCMS backend.Secondly, check whether the MathJax (LaTeX) and Mermaid syntax you use in the content is correct and error-free, any syntax error may cause 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.

Ask: Can I host the MathJax and Mermaid files on my own server instead of using a CDN?Of course you can. You can download the release version files from the official website of MathJax and Mermaid, and then upload these files to the AnQiCMS template directory./public/static/Or other custom static resource paths. After that, you just need to modifybase.htmlcorresponding<script>label'ssrcThe property should point to the file path hosted locally. This can improve the stability and speed of loading, but you need to manage file updates yourself.

How can I customize the style of my mathematical formulas and flowcharts?Answer: For MathJax, it itself provides rich configuration options, you can configure it through JavaScript code after the MathJax script is loaded, such as changing the font, color, or rendering method of the formula. For Mermaid, it supports different themes (theme) settings can bemermaid.initialize()specified, for examplemermaid.initialize({ startOnLoad: true, theme: 'dark' });. In addition, you can also override the default rendering effects through custom CSS styles to meet specific design requirements.