In website operation, we often need to display some content that includes mathematical formulas or complex flowcharts, which not only ensures the accuracy of information transmission but also greatly enhances the professionalism and readability of the article.The CMS knows this need, for this reason, it has built-in support for Markdown editors, and combined with external libraries, allowing us to easily present these professional contents in articles.

Enable Markdown Editor

To use the Markdown editor to write content, you first need to make sure that the Markdown editor is enabled in the AnQiCMS backend.This can usually be found in the corresponding option in the 'Content Settings' under 'Global Settings'.After enabling it, you can choose Markdown mode while editing article content, and enjoy its concise and efficient writing experience.

In Markdown, write formulas and flowcharts

After enabling the Markdown editor, we can directly insert mathematical formulas and flowcharts into the article content.

For mathematical formulas, we usually use LaTeX syntax to write them and enclose them with specific symbols. For example, inline formulas can be used$ E=mc^2 $This method will be displayed side by side with other content in the text. For complex formulas, if you want them to be displayed as a separate paragraph centered, you can place them on a separate line and enclose them with double dollar signs, like this:

$$
\sum_{i=1}^{n} (x_i - \bar{x})^2
$$

This will tell the system that this is a block-level formula that needs to be rendered separately.

The flowchart can be implemented using Mermaid syntax.Mermaid is a simple and easy-to-learn text-to-chart conversion tool that allows us to define the structure of flowcharts using code.mermaidThat's it. For example, a simple flowchart might look like this:

```mermaid
graph TD
    A[开始] --> B{判断};
    B -- 是 --> C[执行操作];
    C --> D[结束];
    B -- 否 --> D[结束];
```

Through this method, we can clearly express complex logic and steps in a plain text environment.

Let them display correctly on the web page: integrate third-party libraries

Although we have written mathematical formulas and flowcharts correctly in Markdown, the browser itself cannot directly recognize and beautifully render these special Markdown syntaxes.In order for them to be correctly parsed and displayed on the web page, we need to use some powerful third-party JavaScript libraries and include them in our website's public template files.base.htmlIt includes the header, footer, and other common elements of the website, ensuring that the libraries are effective on all pages.

  1. Markdown default styleTo make the rendered content of Markdown have better visual effects, you can introduce the GitHub-style Markdown stylesheet. Add the following code tobase.htmlthe file<head>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" />

    This will provide a clean and easy-to-read formatting style for Markdown content.

  2. Display of mathematical formulasTo allow web pages to parse and display LaTeX formatted mathematical formulas, we can use the MathJax library. Add this JavaScript code tobase.htmlthe file<head>Tags inside, best placed before other scripts or right after Markdown style:

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

    This script will asynchronously load MathJax and automatically scan and render mathematical formulas after the page is fully loaded.

  3. Display of flowchartsMermaid flowchart rendering requires the introduction of the Mermaid library itself, and its initialization. Similarly, add the following code before thebase.htmlthe file<head>tag, or<body>end tag.

    <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 import Mermaid in module mode and callinitializea method, wherestartOnLoad: trueMermaid will automatically find and render all marked tags after the page loadsmermaidEnglish code block.

Complete workflow overview.

In summary, the steps to display mathematical formulas and flowcharts in AnQiCMS can be summarized as:

  1. In AnQiCMS backend's 'Global Settings' -> 'Content Settings'.Enable Markdown Editor.
  2. When editing articles, select Markdown mode and use.LaTeX语法编写数学公式（行内$，块级$$) andMermaid语法编写流程图（`mermaidCode block).
  3. Edit the website.Public template filebase.html,"in<head>Inside the tag (or<body>(Before ending), introduce GitHub Markdown style, MathJax script, Mermaid script and initialization code.

After completing these steps, the mathematical formulas and flowcharts in your published content will be displayed beautifully on the website, which will greatly enhance the expressiveness and professionalism of your website content.

Common Questions (FAQ)

  1. 问：I have written formulas and flowcharts in Markdown and also enabled the Markdown editor, but why are they still displayed as plain text code on the page?答：这很可能是因为你忘记了在base.htmlPublic template file includes external JavaScript libraries for MathJax and Mermaid.The browser cannot understand these special syntaxes directly; it requires these libraries to parse and render them.Please follow the methods provided in the article and ensure that the relevant scripts have been correctly added to your template file.

  2. 问：能否不使用CDN，而是将这些JavaScript库下载到本地服务器使用？答：Certainly!The CDN link provided in the article is for convenience and speed.base.htmlthe corresponding one insrcandhrefThe path is modified to the local resource path. Please note that the Mermaid library may require ESM module import methods, and the path must be correct during localization.

  3. 问：Can I only display mathematical formulas without showing flowcharts?答：Absolutely no problem. You can selectively import the required libraries according to your needs. For example, if you only need to display mathematical formulas,base.htmlInclude the MathJax script to use it, without needing to include the Mermaid related script.Similarly, if you do not need GitHub Markdown style, you can also omit that line of CSS import code.