Next, we will explore how to correctly render Markdown content in AnQiCMS, and further realize the elegant display of mathematical formulas and flow charts.
Turn on Markdown editor
To start using Markdown in AnQiCMS, the first step is naturally to inform the system that you wish to use Markdown for content editing. This setting is very simple:
Just log in to your AnQiCMS backend management interface, navigate toGlobal Settingsthen selectContent Settings.On this page, you will find an option to enable the Markdown editor.Tick this option and save, and the content editing area will support Markdown syntax input.
Enable Markdown editor, and 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 consistency and aesthetic formatting. To make your Markdown content display more professionally, we can use some ready-made CSS style libraries, such asgithub-markdown-cssIt provides GitHub-style styles for Markdown-rendered HTML.
To apply this style, you need to modify the template files of AnQiCMS. Usually, the core HTML structure and the CSS/JS files included are defined inbase.htmlThis public template file.
You can access 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>Label inside, add the following line of code:
<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 are displayed correctly on the web page
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 into high-quality layouts.
To enable the display of math formulas, you need tobase.htmlthe file<head>Label inside, add MathJax CDN reference. This allows the browser to load the necessary scripts to parse and render formulas: English
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Add and save, and then you can write LaTeX formatted mathematical formulas in Markdown content. For example, using$$...$$enclosed inline formula:
这是一个著名的质能方程：
$$E=mc^2$$
当提及勾股定理时，我们可以写出：
$a^2 + b^2 = c^2$
The page will automatically render these texts into standard formatted mathematical formulas.
Elegantly display flowcharts and charts on the web.
Similarly, you will need tobase.htmlthe file<head>Label inside, add Mermaid.js CDN reference:
<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 define flowcharts in Markdown content using specific syntax. For example:
This Markdown code will be rendered as a clear flowchart on the page.
Flexible control of Markdown rendering
Under normal circumstances, 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 the rendering process more finely, for example, you may want to display the original Markdown text, or enable rendering only on certain special content fields.
AnQiCMS's template tags provide this flexibility. For example, when usingarchiveDetailthe tag to call document content,Contentthe field 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>
Additionally, if your Markdown content is stored in a custom field or other variables instead of the defaultContentfield, you 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 rendered from Markdown or directly input as HTML), to ensure that the HTML tags are parsed correctly by the browser rather than being escaped as plain text, it is usually necessary to add|safeFilter. This tells AnQiCMS that the content is safe and does not require HTML escaping.
Concluding remarks
Through the above simple configuration, your AnQiCMS website will be able to present more rich, professional, and easy-to-understand content.Whether it is complex formulas in technical documents or clear charts in business processes, they can be presented to readers in **status**, greatly enhancing the quality of your content and user experience.Explore and utilize these features to truly bring your website content to life!
Common Questions (FAQ)
问：Why does the front-end page still look like plain text with no style changes, although I have enabled the Markdown editor in the background and used Markdown syntax in the article?答：You may need to manually include the Markdown stylesheet in the template files of the website. Please check the stylesheet of your website.
base.htmltemplate files, to confirm whether it has been included.<head>Label added insidegithub-markdown-css或其他Markdown样式库的引用代码。此外，如果您的内容是从其他字段（而非标准内容字段）中输出的，确保您使用了English|render|safeFilter to enforce rendering of Markdown and prevent HTML escaping.问：Mathematical formulas and flowcharts can be directly viewed in the Markdown editor of AnQiCMS backend?
问：How do I customize the display settings of MathJax or Mermaid, such as modifying the default theme of flowcharts?答：MathJax and Mermaid both provide a rich set of configuration options. You can in
base.htmlIn the file, the initialization code that follows the modified import script. For example, for Mermaid,mermaid.initialize({ startOnLoad: true });This line of code can add more configuration parameters, such astheme(theme),flowchart(Flowchart specific configuration) and others. For details, please refer to the configuration guide provided by the official MathJax and Mermaid documentation.