In content operations, we sometimes need to display complex mathematical formulas or clear flowcharts, especially in technical articles, data reports, or educational content.AnQiCMS Thanks to its powerful Markdown editor, it provides us with the convenience to achieve this requirement.Through simple configuration and the introduction of necessary library files, you can perfectly present these professional contents on the website front-end.

Enable AnQiCMS Markdown Editor

Firstly, you need to make AnQiCMS recognize and handle Markdown formatted content by setting it in the background.Please go to the "Global SettingsHere, you will see an option to 'Enable Markdown Editor', check it and save the changes.Enable this feature and you can choose Markdown format to write content when creating or editing documents.

Insert mathematical formulas and flowcharts in the content

Enable Markdown editor, you can directly use Markdown syntax to write mathematical formulas and flowcharts in the document content area.

ForMathematical formulaEnglish translation: Usually use the following methods:

  • Inline formula:Use a single$symbol enclosed, for example$E=mc^2$.
  • Inline formula:Use double$$Symbol enclosed, the formula will be displayed on a separate line and centered, for example$$ \sum_{i=1}^n i = \frac{n(n+1)}{2} $$.

ForFlowchartEnglish can use Mermaid syntax, and put it in a special Markdown code block:

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

These syntaxes will be recognized in the Markdown editor, but to ensure they are displayed correctly on the front-end page, additional steps are required.

Add basic styles to Markdown content

To make your Markdown content look tidier and professional on your website, we can introduce a universal Markdown stylesheet.This is like putting on a beautiful dress for text content.base.html, located in/templateThe template folder you use in the directory) of<head>Add the following CDN links to the area:

<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 stylesheet provides a set of default styles similar to GitHub for the HTML elements rendered by Markdown, significantly enhancing the visual effects and readability of the content.

Ensure the correct display of mathematical formulas

The rendering of mathematical formulas requires a special JavaScript library to convert Markdown-formatted formulas into displayable mathematical symbols in the browser.MathJax is a very popular choice, which can convert formulas in LaTeX and other formats into high-quality typesetting.base.htmlthe file<head>Area, followed by the Markdown style sheet, add the CDN reference of MathJax:

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

This script will asynchronously load the MathJax library and automatically scan and render mathematical formulas on the page once the page is loaded.

Implement the dynamic rendering of flowcharts

The display of flowcharts can be achieved with the Mermaid library.Mermaid allows you to create various types of charts using simple text syntax.base.htmlthe file<head>or<body>Add the following code before the 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 the Mermaid library and initialize it, so that it can automatically identify and render the flowchart definitions in Markdown code blocks after the page is loaded.

The content rendering settings in the template

Completed all external library references, the most critical step is to ensure that your AnQiCMS template can correctly render Markdown content into HTML. After obtaining the template tags for document content (for example, those commonly used on the document detail page,)archiveDetail标签（）中，您需要特别处理。

AnQiCMS 的模板系统为 Markdown 内容的渲染提供了便利。您在使用 EnglisharchiveDetailLabel content acquisition can be addedrender=trueThe parameter, it tells the system to automatically convert Markdown formatted text to HTML. In addition, in order to avoid the converted HTML code being re-escaped by the browser and causing display exceptions, it is also necessary to use it in conjunction with|safeFilter.

Therefore, the fragment of the document content that is retrieved and displayed in your template may look like this: 

{% archiveDetail articleContent with name="Content" render=true %}
{{ articleContent|safe }}

Through such settings, the content you write with Markdown editor in AnQiCMS backend, including mathematical formulas and flow charts, can be correctly parsed, rendered, and presented beautifully on the frontend page.

Common Questions and Answers (FAQ)

  1. Q: Why is the mathematical formula and flow chart still not displaying even though I have added the CDN and template code according to the steps?

    • A:When encountering this situation, please first check several key points:
      • Is the Markdown syntax correct?Confirm the mathematical formula you entered in the background (for example$$...$$) and flow chart (for examplemermaid ...The syntax conforms to Markdown and MathJax/Mermaid standards. Any minor syntax error may cause rendering to fail.
      • Template rendering parameters and filters are applied correctly?Ensure that your template uses it when getting content{% archiveDetail ... render=true %}and adds it when outputting{{ variable|safe }}. If it is missingrender=trueEnglish Markdown would not be converted to HTML by AnQiCMS; if missing|safeThe converted HTML may be further escaped by the browser, causing MathJax and Mermaid to fail to recognize and process.
      • Is the CDN link valid and accessible?Use the browser developer tools' Network tab to check if the CDN files of MathJax and Mermaid are loaded successfully, without any 404 or other network errors.
      • Is there a JavaScript error in the browser console?In the browser developer tool's Console tab, check for any JavaScript error reports related to MathJax or Mermaid, which can help locate the problem.

  2. Q: Can I download the MathJax and Mermaid library files to my local server instead of using CDN?

    • A:Completely.If you have special considerations regarding the loading speed, stability, or dependency on CDN of the website, you can download these JavaScript library files to your server.base.htmlThe CDN link should be replaced with the relative paths of these local files. For example, you can store the files in/public/static/js/directory, thensrcattribute to/static/js/mathjax.jsor/static/js/mermaid.esm.min.mjsand, the specific path depends on the actual storage location of your file.

  3. Q: Does AnQiCMS support other mathematical formula or flowchart rendering libraries besides MathJax and Mermaid?

    • A:AnQiCMS itself provides a powerful Markdown editor and the core capability to render Markdown content to HTML.This means theoretically, any third-party library that can be rendered on the front-end via JavaScript, you can try to integrate it into your AnQiCMS website.You only need to find the CDN link or local file of the corresponding library, and add it to your template according to its official documentation, ensuring that the content is output in the correct HTML structure so that these libraries can recognize and process them further.