As an experienced CMS website operation person in the security field, I am well aware of the importance of content creation efficiency and presentation effect for attracting and retaining users.AnQi CMS has integrated Markdown editor in its new version, which undoubtedly brings great convenience to content creators, making content writing more efficient and structured.Below, I will give a detailed introduction on how to enable and optimize the built-in Markdown editor in AnQi CMS to fully exert its advantages in content management.

Enable the built-in Markdown editor in AnqiCMS

The AnQi CMS Markdown editor 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 a simple backend setting:

First, please log in to your Anqi CMS backend management interface. Next, navigate to the "Background Settings" area in the left menu bar and click on "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-page content, etc., 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 content written in Markdown with a beautiful and standardized layout on the front-end web page, 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, which can provide a good reading experience.

You need to include this stylesheet in the website template (usually in the public header file, such asbase.html). The specific operation is to include it in the HTML document's<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 frontend 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.AnQi CMS allows you to extend the functionality of the Markdown editor by integrating these libraries in the template.

Correct display of mathematical formulas:To make the web page display Markdown-written mathematical formulas (such as LaTeX syntax) correctly, you can introduce 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 mathematical formulas on the page and rendering them in a clear and readable format.

The correct display of flowcharts:If you need to draw flowcharts, sequence diagrams, etc., Mermaid is a very practical JavaScript library. To support the rendering of Mermaid flowcharts in the AntQi CMS front-end page, pleasebase.htmlthe file<head>Enter the 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 Anqi CMS is handlingarchiveDetailandpageDetailobtained in the tagsContentWhen a field is processed, it will automatically convert Markdown content to HTML format. This means you can directly output it in the template.{{archive.Content|safe}}The content will be rendered as HTML when it is processed.

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 it in the template tags.renderParameters. For 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, after enabling the background Markdown editor and configuring the frontend styles and scripts, you do not need to perform any additional operationsrenderParameters, the system will automatically provide the expected rendering effect.

By following these steps, you can not only efficiently use Markdown for content creation on the Anqi CMS backend, but also ensure that these contents are presented professionally and functionally complete on the frontend page, including beautiful formatting, mathematical formulas, and flowcharts, greatly enhancing the readability and expressiveness of the content.

Frequently Asked Questions (FAQ)

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

A1: This is usually because you have not included the Markdown style library in your front-end template file. Please check yourbase.htmlor other public template files to ensure that they are included<head>Added inside thegithub-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 are displayed incorrectly on the front-end page, or they are displayed as code directly. How can I solve this?

A2: Markdown itself only provides syntax identification, the actual rendering of mathematical formulas (such as LaTeX) and flowcharts (such as Mermaid) depends on specific JavaScript libraries. Make sure you have alreadybase.htmlthe file<head>The CDN script for MathJax (used for mathematical formulas) and Mermaid (used for flowcharts) was correctly introduced in the tag, and the Mermaid script was also initialized.If the import is error-free, please check for any error messages in the browser console, which may help locate the problem.

Q3: How do I prevent the content of a specific document from being rendered in Markdown, even though the Markdown editor is enabled globally?

A3: You can manually control the rendering behavior of content fields in the template. When callingContentfield'sarchiveDetailorpageDetailthe tag, you can addrender=falseParameters. For example:{% archiveDetail articleContent with name="Content" render=false %}{{articleContent|safe}}This will output the content of the specific document in its original Markdown text format, and will not be converted to HTML.