AnQiCMS as a powerful content management system provides great flexibility in content creation and display.For users accustomed to writing in Markdown syntax, AnQiCMS also provides convenient support, allowing content creators to focus on the text itself without having to pay too much attention to the details of layout.Since version 2.1.1, AnQiCMS has deeply integrated support for Markdown editors, making it easy to format document content in Markdown and render web pages.

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 function in the background to ensure that the content is entered in Markdown format; second, in the front-end template, parsing and beautifully displaying these Markdown contents through specific tags and auxiliary code.

One, enable Markdown editor in the background

First, make sure that the Markdown editing feature of the system is enabled.This is like equipping your AnQiCMS content creation process with a handy tool.The operation steps are very intuitive:

  1. Log in to the AnQiCMS backendUse your administrator account to log into the system management interface.
  2. Navigate to "Global Settings": Find and click the 'Global Settings' option in the left menu of the backend.
  3. Select 'Content Settings'.: Click into the 'Content Settings' page under the 'Global Settings' submenu.
  4. Tick and save: On the content settings page, you will see a named“Enable Markdown Editor”option, please make sure to tick it. After ticking, click the 'Save' button at the bottom of the page to make the settings take effect.

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

II. Correctly render Markdown content in front-end templates

After the backend settings are completed, the next step is to display these Markdown contents correctly and beautifully in the frontend template.This requires a basic understanding of AnQiCMS template tags and filters.

1. Basic content rendering

The AnQiCMS template system is very flexible, it processes content through specific tags and filters. For the details of documents, categories, pages, or tags, it usually usesarchiveDetail/categoryDetail/pageDetailortagDetailAccess tags to get. These tags contain theContentfield carries your Markdown text.

In order to display Markdown text as HTML on a webpage, we need to process it in the template. There are two commonly used methods:

  • Use|renderFilterAt output, use the pipe symbol|连接renderfilter.
  • Add in the tagrender=trueParameterSet directly within the content detail tagrenderParameter.

At the same time, in order to ensure that the parsed HTML code can be correctly rendered by the browser instead of being displayed as plain text, we also need to use 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 native HTML elements usually have plain styles.To make Markdown content present a better visual effect, such as the formatting of code blocks, lists, quotes, and other elements, we need to introduce some CSS styles.The official documentation of AnQiCMS recommends usinggithub-markdown-cssIt allows your Markdown content to look like the rendering effect on GitHub, simple and professional.

You need to add the following code to your template file to include this stylesheet, 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" />

After introducing CSS, you may also need to add a class to the HTML element wrapping the Markdown rendering content so that the styles can be applied correctly, for example:markdown-bodyClass, to ensure that the styles can be applied correctly, for example:

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

3. Special content rendering: mathematical 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 interpret and render.The AnQiCMS Markdown editor also supports the input of these special content, to make it display normally on the front end, you need to introduce the corresponding third-party library.

  • Correct display of mathematical formulas (MathJax)

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

    Please add the following code to yourbase.htmlor other appropriate template files.<head>Before the label is closed:

    <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 a chart drawing tool based on JavaScript, which allows you to create flowcharts, sequence diagrams, Gantt charts, and so on using simple text syntax.

    Please add the following code to yourbase.htmlor other appropriate template files.<head>Before the label is closed:

    `html