In modern content management, providing rich and structured content has become the key to improving user experience and information communication efficiency.Especially for technical blogs, product documentation, or data analysis reports, being able to visually display code, mathematical formulas, and complex flowcharts can undoubtedly make the content more attractive and readable.AnQiCMS as an efficient and customizable enterprise-level content management system fully understands this requirement and provides comprehensive Markdown support, allowing you to easily achieve these advanced content displays.

Next, we will explore how to correctly render Markdown content in AnQiCMS and further realize the elegant display of mathematical formulas and flow charts.

Enable Markdown Editor

To start using Markdown in AnQiCMS, the first step is to inform the system that you want to use Markdown to edit content. This setting is very simple:

Just log in to your AnQiCMS backend management interface, navigate toGlobal Settingsand then selectContent settings. On this page, you will find an option to enable the Markdown editor.Check this option and save to enable Markdown syntax input in the content editing area.

After enabling the Markdown editor, you can directly use Markdown syntax in the content area when creating or editing documents.AnQiCMS will be responsible for parsing these Markdown texts and converting them to HTML.

Add beautiful styles to Markdown content

Although AnQiCMS can correctly parse Markdown syntax and convert it to HTML, the default HTML may lack consistent and beautiful formatting. To make your Markdown content have a more professional display effect, we can make use of some ready-made CSS style libraries, such asgithub-markdown-cssIt provides GitHub-style styling for Markdown-rendered HTML.

To apply this style, you need to modify the AnQiCMS template files. Typically, the core HTML structure and the CSS/JS files included are defined inbase.htmlThis public template file.

You can use the AnQiCMS backend.template designFunction, edit or download template files online for modification. Find the directory of the template you are currently using.base.htmlFile, in<head>Add the following line of code 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" />

After saving the changes, the Markdown content on your website will be presented in a clearer and more professional style.

Math formulas display correctly on the web

For scenarios that require displaying complex mathematical formulas, such as tutorials, technical articles, or academic content, AnQiCMS can also provide strong support.This is mainly achieved by integrating third-party JavaScript libraries such as MathJax.MathJax can render mathematical formulas in LaTeX, MathML, or AsciiMath formats with high-quality typesetting.

To enable the display of math formulas, you need tobase.htmlthe file<head>Inside the tag, add a CDN reference to MathJax. This allows the browser to load the necessary scripts to parse and render formulas:

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

After adding and saving, you can write LaTeX mathematical formulas in Markdown content. For example, using$$...$$ formulas wrapped in line:

这是一个著名的质能方程：
$$E=mc^2$$
当提及勾股定理时，我们可以写出：
$a^2 + b^2 = c^2$

The page will automatically render this text into standard formatted mathematical formulas.

Elegantly display flowcharts and charts on the web.

Flowcharts and diagrams can visually present complex business processes or system architectures, and their clear logical expression is incomparable to plain text.AnQiCMS integrates the Mermaid.js library, allowing you to draw various charts directly in Markdown, including flowcharts, sequence diagrams, and more.

Similarly, you need tobase.htmlthe file<head>Inside the tag, add the CDN reference for Mermaid.js:

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

After introducing Mermaid.js, you can use specific syntax in Markdown content to define flowcharts. For example:

graph TD
    A[开始] --> B{Decision};
    B --> C{condition1}? --> D[operation1];
    B --> E{condition2}? --> F[operation2];
    D --> G[End];
    F --> G;

This Markdown code will be rendered as a clear flowchart on the page.

Flexible control of Markdown rendering

In most cases, when you use Markdown syntax in the content field, AnQiCMS will automatically render it as HTML.However, in certain specific scenarios, you may need to control this rendering process more finely, such as when you want to display the original Markdown text, or enable rendering only on certain special content fields.

AnQiCMS template tags provide this flexibility. For example, when usingarchiveDetailthe tag to call document content,Contentfield supports onerenderParameter, you can explicitly specify whether to convert Markdown to HTML:

{# 启用Markdown渲染（默认行为） #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>

{# 不进行Markdown渲染，显示原始Markdown文本 #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent|safe}}</div>

In addition, if your Markdown content is stored in a custom field or other variable instead of the defaultContentyou can also use|renderFilter to manually trigger Markdown rendering:

{% set myMarkdownContent = "# 这是一个Markdown标题\n- 列表项1\n- 列表项2" %}
<div>自定义Markdown内容：{{myMarkdownContent|render|safe}}</div>

Note that when you are handling any content that may contain HTML tags (whether Markdown-rendered or direct HTML input) to ensure that the HTML tags are correctly parsed by the browser rather than escaped as plain text, it is usually necessary to add the template variable after|safeFilter. This tells AnQiCMS that the content is safe and does not require HTML escaping.

Conclusion

By configuring it simply as described above, your AnQiCMS website will be able to present more rich, professional and easy-to-understand content.Whether it is the complex formula in technical documents or the clear charts of business processes, it can be presented to readers in **state**, greatly improving the quality and user experience of your content.Explore and apply these features to truly bring your website content to life!

Frequently Asked Questions (FAQ)

  1. Ask: I have enabled the Markdown editor in the background and used Markdown syntax in the article, but why does the front-end page still look like plain text with no style changes?Answer: You may need to manually include the Markdown stylesheet in the website template. Please check your website'sbase.htmltemplate file, to confirm whether it has already been included.<head>Added inside thegithub-markdown-cssOr reference code from other Markdown style libraries. In addition, if your content is output from other fields (other than standard content fields), make sure you use|render|safeThe filter enforces rendering Markdown and prevents HTML escaping.

  2. Ask: Can mathematical formulas and flowcharts be directly seen in the AnQiCMS backend Markdown editor?Answer: In most cases, rendering libraries like MathJax and Mermaid.js are parsed and rendered through JavaScript when the front-end page is loaded in the browser.Therefore, in the AnQiCMS backend Markdown editor, you may only see the original Markdown or LaTeX code of formulas and flowcharts, and cannot preview the final rendering effect in real time.You need to view the actual effect on the front page after saving and publishing the content.

  3. Ask: How can I customize the display settings of MathJax or Mermaid, such as modifying the default theme of the flowchart?Answer: MathJax and Mermaid both provide a rich set of configuration options. You canbase.htmlIn the file, modify the initialization code immediately following the script import. For example, for Mermaid,mermaid.initialize({ startOnLoad: true });This line of code can add more configuration parameters, such as,theme(Theme),flowchart(Process flow specific configuration) and so on. For specific configuration instructions, please refer to the official MathJax and Mermaid documentation.