As a senior security CMS website operation person, I know the importance of content creation efficiency and presentation effect for attracting and retaining users.The new version of Anqi CMS integrates a Markdown editor, which undoubtedly brings great convenience to content creators, making content writing more efficient and more structured.Below, I will introduce in detail how to enable and optimize the built-in Markdown editor in the Anqi CMS to give full play to its advantages in content management.

Enable the built-in Markdown editor of AnQi CMS

The Markdown editor of AnQi CMS allows you to write content using concise markup syntax, thus focusing on the content itself rather than complex formatting. To enable this feature, you need to perform simple backend settings:

First, please log in to your security CMS backend management interface.Next, navigate to the "Backend Settings" area in the left menu bar and click "Content Settings".In the content settings page, you will find an option named "Enable Markdown Editor".Please enable this option.

After completing the above steps, when you create or edit documents, single pages, and other content, the content editing area of Anqi CMS will automatically switch to Markdown editor mode.You can use Markdown syntax to create content in this mode.

Ensure Markdown style is displayed correctly on the front-end web page

It is not enough to enable Markdown editor only in the background. In order to present the Markdown content on the front-end web page with beautiful and standard formatting, we need to introduce the corresponding CSS style files. The official document of Anqi CMS recommends usinggithub-markdown-cssThis is a widely used Markdown rendering style library on GitHub, providing a good reading experience.

You need to include this stylesheet in the website template file (usually in the public header file, such asbase.html). The specific operation is to include this stylesheet in the HTML document.<head>Add the following 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" />

By introducing this CDN resource, your front-end page can recognize and render the content generated by Markdown syntax, making it display uniformly and professionally.

Enhance Markdown features: Support mathematical formulas and flowcharts

For professional content that requires displaying complex mathematical formulas or drawing flowcharts, Markdown itself provides syntax support, but its visual presentation on the web requires the assistance of third-party JavaScript libraries.English CMS allows you to extend the functionality of the Markdown editor by integrating these libraries in the template.

Correct display of mathematical formulas:To ensure that web pages display Markdown-formatted mathematical formulas (such as LaTeX syntax) correctly, you can include the MathJax library. Similarly, in yourbase.htmlthe file<head>Add the following code inside the tag:

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

MathJax is responsible for parsing the mathematical formulas in the page and rendering them in a clear and readable format.

Correct display of flowcharts:If you need to draw flowcharts, sequence diagrams, etc., Mermaid is a very practical JavaScript library. In order to support the rendering of Mermaid flowcharts in the front-end page of Anqi CMS, pleasebase.htmlthe file<head>Add the following code inside the tag:

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

This will import the Mermaid library and initialize its rendering function, so that the Mermaid chart code written in Markdown can be correctly parsed and displayed.

Content rendering and template precautions

After the Markdown editor is enabled, the Safe CMS processesarchiveDetailandpageDetailin these tags obtainedContentWhen the field is set, it will automatically convert Markdown content to HTML format. This means that you can directly output in the template.{{archive.Content|safe}}will be the rendered HTML.

If you have specific requirements and do not want the system to automatically convert Markdown to HTML, or if you want to manually control the rendering process, you can add template tags.renderFor example:

  • {% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent|safe}}This will prevent the system from automatically rendering Markdown, and the content will be output as raw Markdown text.
  • {% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}Even in some cases where Markdown rendering is disabled by default, this setting can enforce rendering.

In most cases, when the background Markdown editor is enabled and the front-end styles and scripts are configured, no additional operation is requiredrenderParameters, the system will automatically provide the expected rendering effect.

Through these steps, not only can you efficiently use Markdown for content creation on the Anqi CMS backend, but you can also ensure that these contents are presented professionally and with complete functionality on the front-end pages, including beautiful formatting, mathematical formulas, and flowcharts, greatly enhancing the readability and expressiveness of the content.

Common Questions and Answers (FAQ)

Q1: I have turned on the Markdown editor in the background, why is the content displayed on the front-end page still the original Markdown text with no style?

A1: This is usually because you have not included the Markdown style library in your frontend template file. Please check yourbase.htmlor other public template files to make sure it has been included<head>Label added insidegithub-markdown-cssCDN link, such ashttps://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css. This style file is the basis for good formatting of Markdown text on the front end.

Q2: I have written mathematical formulas or flowchart code in Markdown content, but they do not display normally on the front-end page, or they are displayed as code directly. How can I solve this?

A2: Markdown itself only provides syntax identification, and the actual rendering of mathematical formulas (such as LaTeX) and flowcharts (such as Mermaid) depends on specific JavaScript libraries. Please ensure that you have alreadybase.htmlthe file<head>标签内正确引入了MathJax（用于数学公式）和Mermaid（用于流程图）的CDN脚本，并且Mermaid脚本也进行了初始化配置。If there are no errors introduced, please check the browser console for any error messages, which may help locate the problem.

Q3: How can I prevent Markdown rendering for a specific document's content even if the Markdown editor is globally enabled?

A3: You can manually control the rendering behavior of content fields in the template. In callingContentfield'sarchiveDetailorpageDetailthe tag, you can addrender=falseFor example:{% archiveDetail articleContent with name="Content" render=false %}{{articleContent|safe}}English version: . Thus, the content of this specific document will be output as raw Markdown text and will not be converted to HTML.