AnQiCMS provides a powerful Markdown editor that not only simplifies content creation but also allows flexible handling of special characters and formats to meet the needs of different content displays.For the user, understanding these processing methods can better utilize the editor's potential to output high-quality page content.

Enable Markdown Editor

First, you need to make simple settings in the Anqi CMS backend to use the Markdown editor.You just need to go to the "Global Settings" > "Content Settings" option, find and enable the Markdown editor feature.After enabling, when creating or editing documents, the content editing area will automatically switch to Markdown mode, allowing you to write in plain text while enjoying powerful formatting capabilities.

Core Markdown syntax support

The AnqiCMS Markdown editor supports standard Markdown syntax, which means you can easily use common formats to organize content:

  • Title:Use#Symbols define different levels of headings, for example# 一级标题/## 二级标题.
  • Paragraphs and line breaks:A natural line break forms a new paragraph, or you can use two spaces followed by a return to force a line break at the end.
  • Emphasis:Use*or_Italic text wrapping (*斜体*), using**or__Bold text wrapping (**粗体**)
  • List:Use*/-or+Create an unordered list, using numbers plus.Create an ordered list.
  • Links and images:Use[链接文本](URL)Create a hyperlink, using “Insert image.”
  • code block: Use backticks包裹行内代码，或使用三个反引号Wrap multi-line code blocks.
  • Citation:Use>Use symbols for text referencing.

These basic syntaxes make the content structure clear, easy to write and read.

The extension of special content: mathematical formulas and flowcharts

The highlight of the Markdown editor is its ability to handle complex formats, such as mathematical formulas and flowcharts.However, the final display effect of these advanced functions usually requires the use of third-party JavaScript libraries on the front-end page to render, because Markdown itself is only responsible for marking, not rendering.

To display these special contents correctly on your website, it is usually necessary to include them in the website template files (such asbase.htmlor include the corresponding CDN resources in the page header file

  1. Unified Markdown styleTo make Markdown content have a beautiful and unified display effect on the web, you can introduce something likegithub-markdown-csssuch a style library. Simply in the template's<head>part add the following code:
    
<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" />
  2. presentation of mathematical formulas:If you need to insert complex mathematical formulas into an article, the Anqi CMS editor combined with the MathJax library can achieve this very well. After introducing the CDN resources of MathJax, you can use LaTeX syntax to write formulas in Markdown content, for example:
    • Inline formula:$E=mc^2$
    • Block-level formula:$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$in the template's<head>part add the following code:
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  3. Flowcharts and diagrams:For flowcharts, sequence diagrams, and other visual charts, the Anqi CMS editor supports Mermaid syntax. By introducing the Mermaid JS library, your Markdown text can be rendered into dynamic and interactive charts, such as: 
    graph TD;
    A[Start] --> B{Decision};
    B -- Yes --> C[Operation 1];
    B -- No --> D[Operation 2];
    C --> E[End];
    D --> E;
    in the template's<head>part add the following code:
    
<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>
    After correctly configuring these front-end resources, the formulas and charts you write in the Markdown editor will display normally on the front-end page.

Content processing special characters and formatting

After you complete content creation in AnQiCMS's Markdown editor, the system will perform a series of processes to ensure the correctness and security of the format when displaying the content on the website page.

for the document'sContentfield, if the Markdown editor is enabled, the system will default to converting Markdown formatted content to HTML so that the browser can correctly parse and display it. But you can also use template tags in therenderThe parameter, manually controls whether this conversion is performed. For example,{% archiveDetail archiveContent with name="Content" render=true %}it will force the conversion of Markdown, whilerender=falseit will not.

In addition, AnQiCMS also provides flexible filters when handling special characters and HTML tags.By default, to prevent cross-site scripting (XSS) and other security issues, the system automatically escapes the output HTML tags and some special characters.This means if you enter directly in the Markdown content<script>tags, which will be converted to&lt;script&gt;Display, rather than being executed by the browser.

If you are sure that certain HTML fragments are safe and want them to be parsed by the browser, for example, HTML content converted from Markdown, you can use|safeFilter. For example,{{archiveContent|safe}}It tells the system that this content is safe, does not need to be escaped, and should be output directly in HTML format. Conversely, if you want to force the display of the HTML tag text instead of letting the browser parse it,|escapeThe filter can come in handy.

Summary

The AnqiCMS Markdown editor provides an efficient and flexible content creation experience through support for basic grammar and the extension capabilities for advanced content such as mathematical formulas and flowcharts.Combining the flexible control mechanism of front-end rendering libraries and content output, it ensures that special characters and formats are properly handled, ensuring both the richness of content and the security and maintainability of the website.

Frequently Asked Questions (FAQ)

  1. Why did I enable the Markdown editor and input formulas in the background, but they do not display normally on the front page?This is usually because the CDN resources of front-end rendering libraries such as MathJax or Mermaid have not been correctly introduced into your website template (for examplebase.htmlIn which. The Markdown editor is responsible for marking and storing content, while the actual rendering of mathematical formulas and flowcharts is done by the front-end JavaScript library.Please check whether your template has added the corresponding part in the article titled "Special Content Expansion"<script>or<link>.
  2. I hope the HTML content output by the Markdown editor can be parsed by the browser instead of being displayed as raw HTML tags, what should I do?The Aanqi CMS defaults to escaping output HTML content to prevent potential security issues. If you trust the Markdown converted HTML content and want the browser to directly parse it, you need to use the output content in the template.|safeFilter. For example, to{{archive.Content}}is modified to{{archive.Content|safe}}Please note, only use content you trust.|safe.
  3. If the Markdown editor is accidentally disabled, will the content written in Markdown be lost?The content will not be lost. Even if you disable the Markdown editor, the content is still stored in the database in Markdown format.It is displayed as plain text only when editing, and the system will not automatically convert it to HTML when outputting on the front-end page.If you need to manually control the conversion, you can use it in the templaterenderparameters, for example{% archiveDetail archiveContent with name="Content" render=true %}Even if the editor is disabled, it can be forced to convert Markdown to HTML.