Enable Markdown editor in Safe CMS

To start using the AnQiCMS Markdown editor, you need to first make some simple settings in the system backend.This step is the key to activating Markdown features.

Go to the backend management interface of AnQiCMS.In the left navigation menu, find and click on "Background SettingsIn the content settings page, you will find an option to enable or disable the Markdown editor.Please make sure this option is set to the enabled state.After completing the settings, save the changes, your AnQiCMS system will be ready to support Markdown content creation.

Apply Markdown default style on the web page

After enabling the Markdown editor, in order to present your Markdown content beautifully and legibly on the website frontend, especially for documents with elements such as code blocks, quotes, and so on, it is recommended that you introduce a set of Markdown styles.GitHub Flavored Markdown (GFM) style is currently widely accepted and has excellent visual effects.

You can quickly apply these styles by introducing CDN resources. Typically, this requires in your website template'sbase.htmlfile (or any template file that serves as the basis for all pages) of<head>Add a line of code within a tag. For example, you can add the following link to include GitHub Markdown style:

<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" />

This way, your Markdown content will automatically have a professional formatting style similar to GitHub after being converted to HTML.

Proper display of mathematical formulas on web pages

For documents that need to display mathematical formulas, while Markdown editors themselves can recognize formula syntax, it still requires specialized JavaScript libraries to render these formulas correctly on the web.MathJax is a powerful mathematical typesetting engine that can convert mathematical formulas in LaTeX, MathML, and other formats into high-quality web display effects.

To enable the rendering of mathematical formulas in AnQiCMS, you also need to do so in the website template'sbase.htmlfile (or your general template file)<head>Add a MathJax CDN script reference within the tag:

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

After adding this script, you can write mathematical formulas in Markdown (such as using)$$...$$or$...$The package can be correctly parsed and displayed on the front-end page.

The correct display of the flowchart on the web page.

In addition to mathematical formulas, your document may also need to include flowcharts or sequence diagrams to more intuitively express complex logic.Mermaid is a Markdown-based chart drawing tool that allows you to create various charts using a concise text syntax.

To enable the display of Mermaid flowcharts on the AnQiCMS front-end, you need tobase.htmlfile (or your general template file)<head>Add Mermaid CDN script within the tag. Please note that Mermaidtype="module"script type:

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

This script imports the Mermaid library and initializes it, so that it can automatically render the flowchart defined in Markdown when the page loads.

Using Markdown for content creation

Once the Markdown editor and its related rendering features are enabled, you can enjoy the convenience of Markdown in multiple content creation areas of AnQiCMS. This includes but is not limited to:

  • Document ContentWhen creating or editing articles, products, and other documents, the document content field will support Markdown syntax.
  • Category ContentEdit category descriptions or details can also use Markdown.
  • Single page contentWhen creating single pages such as "About Us", "Contact Us", etc., the page content can be written in Markdown.
  • Tag contentTo add detailed descriptions to tags, Markdown can also be used.

AnQiCMS's Markdown editor will automatically convert Markdown syntax to HTML and display it on the front-end page when you save the content. In cases where you need to manually control Markdown rendering in templates, such as for certain specific content fields, you can do so through template tags.render=trueParameters explicitly trigger the Markdown to HTML conversion, or byrender=falseParameters prevent automatic conversion for finer control.

For example, inarchiveDetailtags, document contentContentField rendering can be controlled in this way:

{# markdown 转 html #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>
{# 不进行markdown转换 #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent|safe}}</div>

By following these steps, AnQiCMS users can fully utilize the advantages of Markdown to create and manage website content more efficiently and structurally, while ensuring a professional and feature-rich visual effect on the front end.

Common Questions and Answers (FAQ)

1. Why did I turn on the Markdown editor, but I can't see the rendering effect of mathematical formulas or flowcharts on the document details page?

Markdown editor opens, AnQiCMS will convert Markdown content to HTML in the background. However, rendering mathematical formulas and flowcharts requires the front-end browser to load specific JavaScript libraries to parse the specific tags within these HTML (such as$$...$$orgraph TD;)，and convert it into a visual image. You need to follow the instructions in the sections 'Correct display of mathematical formulas on web pages' and 'Correct display of flowcharts on web pages', and add the CDN scripts for MathJax and Mermaid to the template of your website.<head>Tags inside.

2. I am using a custom theme, where can I findbase.htmlthe file to add CDN scripts?

The root directory of template files in AnQiCMS is/templateYour custom theme will usually have an independent folder in this directory (for example,)}]/template/yourtheme/).base.htmlFiles are generally the common layout files for your theme, which may be directly located in the theme root directory, or in the public code directory (for example)yourtheme/bash.htmloryourtheme/partial/header.htmlThen it is referenced by other templates). You need to find and edit this HTML file as the base for your topic structure.

3. Will the old HTML content be affected after enabling the Markdown editor?

Will not.The Markdown editor mainly affects the content you enter using Markdown syntax when creating or editing new content.For existing pure HTML content, AnQiCMS treats it as ordinary HTML and does not attempt to convert it to Markdown before rendering. Therefore, you do not need to worry about old content being incorrectly parsed or damaged.The Markdown feature is incremental, aiming to provide a new way of content creation.