To implement the automatic Markdown conversion of AnQiCMS document content and render it correctly on the web page, it mainly involves two aspects: first, enabling the Markdown editing feature in the background to ensure that the content is entered in Markdown format; second, in the front-end template, parsing these Markdown contents through specific tags and auxiliary code to display them beautifully.

一、Background Enable Markdown Editor

Firstly, ensure that the Markdown editing feature of the system is turned on.This is like equipping a handy tool for your AnQiCMS content creation process.

  1. Login to AnQiCMS backend：Log in to the system management interface using your administrator account.
  2. Navigate to "Global Settings"English: In the left menu bar on the back end, find and click the 'Global Settings' option.
  3. Select 'Content Settings'English: Click to enter the 'Content Settings' page under the 'Global Settings' submenu.
  4. Select and saveOn the content settings page, you will see a named"Enable Markdown editor"option, please make sure to select it. After selecting, click the "Save" button at the bottom of the page to apply the settings.

Once enabled, the content input box for publishing or editing documents (such as articles, products, single pages, tag content, etc.) will support Markdown syntax input. This means you can directly use# 标题/**加粗**/*斜体*/- 列表项Use concise Markdown syntax to organize your content.

Part two: Correctly render Markdown content in front-end templates

After the background settings are completed, the next step is to ensure that these Markdown contents are correctly parsed and beautifully displayed in the front-end template.This requires a basic understanding of AnQiCMS template tags and filters.

1. Basic content rendering

AnQiCMS's template system is very flexible, it processes content through specific tags and filters. For the details of documents, categories, pages, or tags, it is usually usedarchiveDetail/categoryDetail/pageDetailortagDetailEnglish tags to get. These tags inside.Contentfield carries your Markdown text.

To make Markdown text display as HTML on a webpage, we need to process it in the template. There are two common methods:

  • Use|renderFilterIn output content, through the pipe symbol|ConnectrenderFilter.
  • Add in the tagrender=trueParametersDirectly set within the content detail tagrenderParameter.

To ensure that the parsed HTML code is correctly rendered by the browser rather than displayed as plain text, we also need to use it in conjunction with|safeFilter.|safeTell the template engine that this content is safe HTML and does not need to be automatically escaped.

The following is an example of rendering Markdown content on a document detail page:

{# 假设您正在文档详情页，archiveContent变量包含了Markdown内容 #}
{# 方法一：使用 |render 过滤器处理Markdown并用 |safe 避免转义 #}
<div class="markdown-body">
    {% archiveDetail archiveContent with name="Content" %}{{ archiveContent|render|safe }}
</div>

{# 方法二：在标签内部直接指定render=true参数，同样需要 |safe 避免转义 #}
<div class="markdown-body">
    {% archiveDetail articleContent with name="Content" render=true %}{{ articleContent|safe }}
</div>

Please note,|renderorrender=trueIt is the key to converting Markdown to HTML.If this step is missing, even if the content is in Markdown format, the front-end will only display it as plain text and will not parse it into formatted HTML.

2. Style Enhancement: Beautify Markdown Layout

Although the content has been converted to HTML, the original HTML elements are usually plain in style.To make Markdown content present better visual effects, such as the formatting of code blocks, lists, quotes, etc., we need to introduce some CSS styles.github-markdown-cssIt makes your Markdown content look like GitHub's rendering effect, simple and professional.

To include this stylesheet, you need to add the following code to your template file (usuallytemplate/{您的模板目录}/base.htmlor the main layout file) of<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" />

Introduce CSS, you may also need to add a class to the HTML element wrapping the Markdown rendered content,markdown-bodyto ensure that the styles are applied correctly, for example:

<div class="markdown-body">
    {# 这里是您的Markdown渲染内容，如 {{ archiveContent|render|safe }} #}
</div>

3. Special content rendering: Math formulas and flowcharts

Markdown itself can represent mathematical formulas and flowcharts, but browsers cannot recognize and draw them directly.This requires a specific JavaScript library to parse and render.The Markdown editor of AnQiCMS also supports these special content inputs. To display them normally on the front-end, you need to include the corresponding third-party libraries.

  • Correct display of math formulas (MathJax)

    For mathematical formulas, MathJax is a very popular and powerful JavaScript display engine.It can render mathematical expressions in LaTeX, MathML, and other formats into high-quality formula images or SVG/HTML.

    Please add the following code to yourbase.htmlor another appropriate template file<head>Label closed before:

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

  • Correct display of flowchart (MermaidJS)

    MermaidJS is an English-based JavaScript chart drawing tool that allows you to create flowcharts, sequence diagrams, Gantt charts, and more using simple text syntax.

    Please add the following code to yourbase.htmlor another appropriate template file<head>Label closed before:

    `html