In AnQiCMS, adding Markdown, mathematical formulas, and flowcharts to content can greatly enhance its expressiveness and readability, especially for scenarios such as technical documents, educational materials, or data analysis reports.AnQiCMS as an efficient content management system, provides flexible mechanisms to support these modernized content display needs.

To implement the correct display of Markdown, mathematical formulas, and flowcharts on AnQiCMS pages, it mainly involves enabling the background settings and necessary introduction of front-end templates.The following is a detailed step and some practical suggestions.

一、Enable Markdown Editor

AnQiCMS provides a modern content creation environment, especially in supporting Markdown editor, which greatly enhances the efficiency and quality of content publishing.Markdown with its concise syntax enables content creators to focus on the content itself rather than繁琐的排版.

To fully utilize the advantages of Markdown, you first need to enable it in the background. This is usually possible inAutoCMS background -> Global settings -> Content settingsFind the corresponding option.Enable Markdown editor, whether publishing articles, creating single pages, or editing the description of categories or tags, the content editor will switch to Markdown mode.This means that you can directly use Markdown syntax in the content area for creation, and the system will automatically convert it to HTML when saved, laying the foundation for the display on the front-end page.

II. Let the webpage understand and beautify Markdown

Even though AnQiCMS backend converts Markdown to HTML during saving, in order for these HTML contents to be displayed beautifully, standardizedly, and with good readability on the front end, it usually requires the introduction of a dedicated stylesheet.GitHub Markdown CSS is a popular choice that allows your Markdown content to have the elegant formatting of GitHub.

Integrate this stylesheet into your website is very direct. You need to find the current template file you are using.base.htmlThis is a general layout file that includes the website's header, footer, and other common parts, usually located/template/你的模板目录/). Inbase.htmlof<head>Add the following inside the tag<link>Code, introduce GitHub Markdown CSS:

<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 is how all content converted from Markdown in the page will have a unified and beautiful style.

Third, easily integrate mathematical formulas.

For scientific, technical, or educational content, the correct display of mathematical formulas is a crucial element.Plain HTML is not well-suited to present complex mathematical expressions.MathJax is a powerful JavaScript library that can render mathematical formulas in LaTeX, MathML, or AsciiMath formats into high-quality, interactive displays on web pages.

To integrate MathJax into the AnQiCMS page, it is also necessary tobase.htmlPerforming operations in the file. After adding the GitHub Markdown CSS at the beginning,<head>Label inside (or at the bottom of the page, depending on your considerations for page loading performance and script dependencies), add the MathJax reference script:

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

After the integration is complete, you can write mathematical formulas in Markdown content.MathJax supports a variety of syntaxes, the most commonly used is LaTeX syntax.$E=mc^2$，English block formula (occupies a single line and is centered) can be used$$ \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2} $$。When the page is loaded, MathJax will automatically recognize and render these formulas.

Four, draw dynamic flow charts

Flowcharts, sequence diagrams, and other charts can present complex concepts and processes in a visual way, making the content more vivid and easy to understand.Mermaid.js is an English-based Markdown chart drawing tool that allows you to create various exquisite charts through simple text descriptions.

To display Mermaid charts on the AnQiCMS page, you need to include the Mermaid.js library and initialize it. Continue inbase.htmlthe file<head>Add the following JavaScript code inside the label (or at the bottom of the page):

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

This script will import the Mermaid library and instruct it to automatically find and render charts when the page is loaded.In Markdown content, you can use specific code blocks to create charts.

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

Mermaid.js will parse these text blocks and convert them into interactive SVG charts.

V. Render Markdown content to the page.

When you enable the Markdown editor in the background and input content containing Markdown, mathematical formulas, or flowcharts, AnQiCMS will automatically convert the Markdown text to HTML format during page rendering. This means that you can use Markdown in your templates.archiveDetail/pageDetailortagDetailThe content called by tags, which is usually displayed in HTML format and automatically applies the styles and scripts introduced earlier.

For example, if you want to display Markdown content on the article detail page, you can call the document content field like this:

{% archiveDetail articleContent with name='Content' %}{{articleContent|safe}}{% endarchiveDetail %}

Here,articleContentis a variable you defined,name='Content'specified the document to be retrieved.Contentfield.|safeThe filter is crucial, it indicates that the template engine treats the output HTML content as "safe", thus avoiding unnecessary escaping of HTML tags, ensuring that the HTML converted from Markdown can be displayed normally.

It should be noted that AnQiCMS also providesrender=trueParameters can be used in certain cases, such as storing Markdown content through custom fields, or when you want to enforce Markdown to HTML conversion. For example:

English