As an expert well-versed in the operation of AnQiCMS (AnQiCMS), I am glad to provide you with a detailed explanation of how to enable and fully utilize the Markdown editor to create and manage your document content in AnQiCMS.In the digital age, Markdown, with its concise and efficient features, has become a tool for content creators.AnQiCMS fully understands its value and has introduced a Markdown editor in the new version, greatly enhancing the flexibility and convenience of content editing.

Enable Markdown editor in Anqi CMS

To start using AnQiCMS's Markdown editor, you need to make simple settings in the system background first.This step is the key to activating the Markdown feature.

Go to the AnQiCMS admin interface. In the left navigation menu, find and click on "Admin Settings", then select "Content Settings".In the content settings page, you will find an option to enable or disable the Markdown editor.Make sure to enable this option. After completing the settings, save the changes, and your AnQiCMS system will be ready to support Markdown content creation.

Apply Markdown default style on the web page

After enabling the Markdown editor, to make your Markdown content appear beautiful and readable on the website frontend, especially for documents with elements such as code blocks and quotations, it is recommended that you introduce a set of Markdown styles.The GitHub Flavored Markdown (GFM) style is currently widely accepted and has excellent visual effects.

You can quickly apply these styles by introducing CDN resources. Usually, this needs to be done in the template of your website.base.htmlfile (or any template file that serves as the basis for all pages) of the<head>Add a line of code inside the tag. For example, you can add the following link to introduce 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.

Display of mathematical formulas correctly on the web

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

To enable the rendering of mathematical formulas in AnQiCMS, you also need to enable it in the website template'sbase.htmlfile (or your general template file)<head>Add a CDN reference script for MathJax inside 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.

Display of flow chart correctly on the web

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

In order to support Mermaid flowchart display on the AnQiCMS front-end, you need tobase.htmlfile (or your general template file)<head>Add Mermaid's CDN script reference inside the tag. Please note that Mermaid requirestype="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.

Use 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 content: When editing categories, the description or details can also be written in Markdown.
  • Single page contentWhen creating single pages such as "About Us", "Contact Us", and so on, the page content can be written in Markdown.
  • Label content: When adding detailed descriptions to tags, you can also use Markdown.

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

For example, inarchiveDetailwithin the tag, document contentContentThis field can control rendering:

{# 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, creating and managing website content more efficiently and in a more structured manner, while ensuring professional and feature-rich visual effects are presented on the frontend.

Frequently Asked Questions (FAQ)

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

After the Markdown editor is turned on, 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 in the HTML (such as$$...$$orgraph TD;)，and convert it into a visual image. You need to follow the instructions in the chapters "Correct display of mathematical formulas on the web" and "Correct display of flowcharts on the web" in the article, and add the CDN scripts of MathJax and Mermaid to the template of your website.<head>Tag inside.

2. I am using a custom theme, where can I find it?base.htmlFile to add CDN script?

The root directory of template files in AnQiCMS is/template. Your custom theme will usually have an independent folder in this directory, such as/template/yourtheme/)base.htmlThe file is generally a common layout file for your theme, it may be directly located in the theme root directory, or in the public code directory (such asyourtheme/bash.htmloryourtheme/partial/header.htmlThen it is referenced by other templates).You need to find and edit the HTML file that serves as the page basis according to the specific structure of your theme.

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

I don't know. The Markdown editor mainly affects the content you enter using Markdown syntax when you create or edit.For existing pure HTML content, AnQiCMS will treat it as ordinary HTML and will not attempt to convert it to Markdown before rendering. Therefore, you do not need to worry about old content being incorrectly parsed or damaged.Markdown features are incremental, aiming to provide a new way of content creation.