Enable Markdown Editor in AnQiCMS

Firstly, you need to make simple configurations in the background to use the AnQiCMS Markdown editor feature.Please log in to your AnQiCMS backend management interface, then navigate to the "Backend SettingsIn the content settings page, you will find an option named "Enable Markdown Editor".Tick this option and save the settings, and you can use Markdown syntax when editing articles or pages.Once enabled, your content creation will support Markdown syntax, laying the foundation for the integration of mathematical formulas and flowcharts.

Display Markdown Default Style Correctly

Markdown content is displayed as plain text by default, lacking aesthetics and readability.To make the content rendered by Markdown have elegant and consistent styles, we usually introduce a CSS stylesheet.An extensively adopted and effective choice is GitHub's Markdown style.To apply this style, you need to edit your website template file.

In the template system of AnQiCMS,base.htmlIt is usually the header and footer template for all pages. Please find your template directory (usually/template), then open thebase.htmlfile in it.<head>Label inside, add the following CSS reference 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" />

This code will load GitHub-style Markdown stylesheet from CDN, making your Markdown content appear professional and easy to read on the frontend page.

正确显示数学公式 (LaTeX/MathML)

For content that includes mathematical formulas, Markdown itself cannot render these complex expressions directly.We need to use a specialized JavaScript library called MathJax to parse and display mathematical formulas written in LaTeX or MathML syntax.

Similarly, you will need tobase.htmlthe file<head>标签内部，紧随Markdown样式之后，添加MathJax的引用脚本：

<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 use LaTeX syntax to write mathematical formulas in Markdown content. For example,$E=mc^2$they will be rendered as inline formulas, whereas$$\frac{-b \pm \sqrt{b^2-4ac}}{2a}$$It will be rendered as a block-level display formula. Make sure your mathematical formula follows the LaTeX or MathML syntax supported by MathJax.

正确显示流程图 (English)

The flowchart is a powerful tool for visualizing complex processes and logic.AnQiCMS integrates the Mermaid.js library, making it possible to create and render flowcharts directly in Markdown.base.html文件中添加Mermaid的JavaScript引用。

请在base.htmlthe file<head>标签内部，或<body>Label end before, add the following Mermaid script:

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

This code introduces the Mermaid library and initializes it, making it capable of parsing Mermaid syntax in Markdown. For example, you can enter the following content in a Markdown editor to create a flowchart: 

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Save and preview the document, and you will see these texts rendered into corresponding flowcharts.Mermaid supports various chart types, such as sequence diagrams, Gantt charts, etc., and you can explore more usage according to your needs.

Content creation and verification

base.htmlIs the CDN link introduced correct, and does the Markdown content meet the requirements of the corresponding library (MathJax or Mermaid)?

Summary

Enabling Markdown editor and integrating support for mathematical formulas and flowcharts in AnQiCMS with just a few simple steps can greatly enrich the expressiveness of your website's content.This not only improves the efficiency of content creation, but also provides your target audience with a more professional and attractive reading experience. Whether it's technical documents, teaching content, or business reports, it can be presented in a clearer and more intuitive way.

Common Questions (FAQ)

问：Why can't mathematical formulas and flowcharts be displayed even after I enabled the Markdown editor?

答：Enabling the Markdown editor simply allows you to use Markdown syntax for content creation in the background. To correctly render mathematical formulas and flowcharts, you still need to configure the Markdown editor on your website.base.htmlThe template file should manually add the corresponding CSS and JavaScript references. Specifically,github-markdown-cssThe default style for Markdown content,MathJaxUsed for parsing and displaying mathematical formulas, as well asMermaid.jsUsed for rendering flowcharts. Please carefully check the introduction of these external resources according to the guidance of this article, ensuring that they are correctly placed in<head>Tags inside.

问：我是否可以将这些CDN资源下载到本地服务器，而不是使用CDN链接？

答：是的，您可以选择将github-markdown-css/MathJaxandMermaid.jsThe resource file has been downloaded to your server and modifiedbase.htmlThe reference path points to the local file.The benefits of this approach include avoiding reliance on external CDNs, improving the stability of resource loading, and in some cases, enhancing the page loading speed.However, please note that you should regularly update the local files to get the latest features and security patches.

Question: How can I ensure that my math formula and flowchart syntax are correct in the Markdown editor?

答：For mathematical formulas, you usually need to use LaTeX syntax. Inline formulas are enclosed by a single dollar sign$for example$E=mc^2$），block-level formulas are enclosed by double dollar signs$$for example$$\sum_{i=1}^n i = \frac{n(n+1)}{2}$$）。对于流程图，您需要使用Mermaid语法，并用特定的代码块标记来包裹，例如从mermaid``````开始，到“End.”}]Suggest you to refer to the official documentation of MathJax and Mermaid to understand their detailed syntax specifications and supported chart types.Many online Markdown editors also provide real-time preview features, which can help you verify whether the syntax is correct.