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

Enable Markdown Editor

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

Core Markdown syntax support

The Markdown editor of Anqi CMS supports standard Markdown syntax, which means you can easily use common formatting to organize content:

  • Title:Use#Symbols define different levels of titles, such as# 一级标题/## 二级标题.
  • Paragraphs and line breaks:Natural line breaks form new paragraphs, or use two spaces plus enter at the end of a line to force a line break.
  • Emphasis:Use*or_Wrap text to italicize (*斜体*)**or__Wrap text to bold (**粗体**).
  • List:Use*/-or+Create an unordered list, using numbers plus.Create an ordered list.
  • Links and images:Use[链接文本](URL)Create a hyperlink, use “Insert image.”
  • Code block:Use backticks包裹行内代码，或使用三个反引号Wrap multiline code blocks.
  • Citation:Use>Symbol for text citation.

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

Expansion of special content: mathematical formulas and flow charts

One of the highlights 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 features usually requires the use of third-party JavaScript libraries on the front-end page, because Markdown itself is only responsible for marking, not for rendering.

To display these special contents correctly on your website, it is usually necessary to include the corresponding CDN resources in the website template file (for examplebase.htmlor the page header file):

  1. A unified Markdown style:To make the Markdown content have a beautiful and unified display on the web page, you can introduce something likegithub-markdown-cssSuch a style library. Just add the following code in the template.<head>Part:
    
<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 in 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 formula:$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$In the template:<head>Part:
    <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 Anq CMS editor supports Mermaid syntax. By introducing the Mermaid JS library, your Markdown text will 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:<head>Part:
    
<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 frontend resources, the formulas and charts you write in the Markdown editor can be displayed normally on the frontend page.

Content output special characters and format handling

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

for the document'sContentFields, if the Markdown editor is enabled, the system will automatically convert Markdown-formatted content to HTML by default so that the browser can correctly parse and display it. However, you can also use template tags within therenderParameters, manual control whether to perform this conversion. For example,{% archiveDetail archiveContent with name="Content" render=true %}will force the conversion of Markdown,render=falsewhile it will not.

In addition, AnQiCMS also provides flexible filters when handling special characters and HTML tags.By default, to prevent security issues such as Cross-Site Scripting (XSS), the system automatically escapes output HTML tags and some special characters.<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 you want them to be parsed by the browser, for example, HTML content converted from Markdown, you can use|safea filter. For example,{{archiveContent|safe}}Tells the system that this content is safe and does not require escaping, and should be output directly in HTML format. Conversely, if you want to force the display of the text of HTML tags instead of having the browser parse them,|escapeThe filter can come in handy.

Summary

The Markdown editor of Anqi CMS provides an efficient and flexible content creation experience for users through its support for basic grammar and its extended capabilities for advanced content such as mathematical formulas and flowcharts.Combining the flexibility of front-end rendering libraries and control mechanisms during content output, it ensures that special characters and formats are properly handled, thereby guaranteeing the richness of content while also considering the security and maintainability of the website.

Common Questions (FAQ)

  1. Why did I enable the Markdown editor and input formulas in the background, but they don't display normally on the front-end page?This is usually because the CDN resources of front-end rendering libraries such as MathJax or Mermaid are not properly introduced into your website template (such asbase.htmlin the bracket.The Markdown editor is responsible for marking and storing content, while the actual rendering of mathematical formulas and flowcharts is done by front-end JavaScript libraries.<script>or<link>Label.
  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. How should I do that?The default behavior of Anqi CMS is to escape the HTML content output to prevent potential security issues. If you trust the HTML content converted from Markdown and want the browser to directly parse it, you need to use|safeFilter. For example, to{{archive.Content}}Change to{{archive.Content|safe}}. But please note, only use content you trust.|safe.
  3. If you accidentally disable the Markdown editor, 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 in plain text format only when editing, and the system will no longer automatically convert it to HTML when outputting on the front-end page.renderparameters, such as{% archiveDetail archiveContent with name="Content" render=true %}Even if the editor is disabled, Markdown to HTML conversion can be enforced.