For users who frequently need to publish technical articles, tutorials, or academic content, a Markdown editor is undoubtedly a tool to improve efficiency.Its concise syntax makes content creation intuitive and quick.AnQiCMS as a modern content management system naturally fully considers the usage scenarios of Markdown and provides strong support.However, when we need to insert complex mathematical formulas or draw intuitive flowcharts in Markdown formatted articles, relying solely on the functions of Markdown itself is not enough.At this time, we need to rely on some external JavaScript libraries to enhance the content display capabilities of AnQiCMS.

This article will introduce in detail how to enable Markdown editor in AnQiCMS, and integrate third-party libraries, so that your website can perfectly display mathematical formulas and flow charts.

Enable AnQiCMS Markdown Editor

Before using these advanced features, the first step is to ensure that the AnQiCMS backend Markdown editor is enabled. You just need to go toAnQiCMS backend, navigate toGlobal Settings, and then click.Content Settings.On this page, you will find an option to turn on or off the Markdown editor.Please confirm that this option is selected, so you can use Markdown syntax when editing document content.

To introduce common styles for Markdown content

To make your Markdown content have a more beautiful and unified visual effect on the front-end page, we can introduce a set of universal Markdown styles.This is like putting on a beautiful dress for your Markdown article.github-markdown-cssIt can provide a concise style similar to GitHub.

You need to make some minor changes in the template files of AnQiCMS. Specifically, please find the directory of the template you are currently using under.base.htmlFiles. This file is typically the basic skeleton shared by all pages of a website.<head>tags, add the following code inside:

<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 style sheets from CDN and automatically apply beautiful formatting to your Markdown content.

Display mathematical formulas correctly on the web

Next, let's deal with the display of mathematical formulas.In Markdown, writing mathematical formulas usually uses LaTeX syntax, but browsers themselves cannot directly render these complex expressions.For this, we introduce the powerful JavaScript library MathJax.MathJax can parse LaTeX syntax and convert it into correctly displayed mathematical symbols on the web.

Similarly, you will need tobase.htmlthe file<head>Partially join the MathJax reference script:

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

After completing this step, you can write mathematical formulas like this in the Markdown editor:

Inline formula, using a single$Symbol enclosed:$E=mc^2$

Independent formula block, using double$$Symbol enclosed:

$$\sum_{i=1}^n i = \frac{n(n+1)}{2}$$

They will display perfectly on your website.

Display flowcharts correctly on the web

The flowchart is another very practical visual tool in technical documents.AnQiCMS integrates Mermaid.js to support Markdown format flowcharts.Mermaid allows you to use concise text syntax to describe various charts, including flowcharts, sequence diagrams, and so on.

To enable this feature, you also need tobase.htmlof<head>Add Mermaid script reference in the label. Note that Mermaid needs to be imported as a module, so the script tag is slightly different:

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

Now, you can create flowcharts in Markdown content. For example, a simple flowchart can be written as: 

graph TD;
    A[Start] --> B{Decision?};
    B -- Yes --> C[Execute Operation];
    B -- No --> D[End];
    C --> D;

Apply all settings to the content

Once the above configuration is completed, you can freely create content containing mathematical formulas and flowcharts in the Markdown editor of AnQiCMS.Write only according to the corresponding Markdown or Mermaid syntax rules, and the system will automatically recognize and display these elements correctly during rendering.This one-time configuration, available everywhere, greatly enhances the efficiency and expressiveness of content creation.

Through simple configuration steps, AnQiCMS can upgrade ordinary Markdown content to a rich media document that supports complex mathematical formulas and beautiful flowcharts.This not only enriches your content format, but also brings a more intuitive and efficient reading experience to readers, especially suitable for websites focusing on technical sharing, education and training, or scientific research.Immediately try these powerful features, and take your AnQiCMS site to a new level!

Common Questions (FAQ)

  1. Q: I followed the steps, but the mathematical formula or flowchart still cannot be displayed, what should I do?A: Firstly, make sure you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" of the AnQiCMS backend. Secondly, check carefully.base.htmlIs the CDN script path introduced in the file completely correct, includinghttporhttps、version number, any character error may lead to failure.CDN service may be unstable sometimes, you can try clearing the browser cache (Ctrl+F5) or changing the CDN source (if MathJax and Mermaid support multiple sources).Finally, confirm whether the formula and flowchart syntax you use in the Markdown editor are standard and correct, and you can refer to the official documents of MathJax and Mermaid for verification.

  2. Q: Does AnQiCMS support other types of Markdown extensions, such as Gantt charts, sequence diagrams, etc?A: English mentioned in the text that Mermaid.js itself supports various chart types, with very powerful functions, in addition to flowcharts (graph), it also supports sequence diagrams (sequenceDiagram), class diagrams (classDiagram）、甘特图（English)ganttEnglish只要Mermaid库能够解析的语法，在正确引入Mermaid脚本后，AnQiCMS的Markdown编辑器通常都能支持。You can check the official Mermaid documentation to learn more about the supported chart types and their corresponding Markdown syntax, and try using them in the article.

  3. Q:base.htmlWhere can I find and edit the file?A:base.htmlThe file is located in the template directory of your AnQiCMS site. The specific path is/template/您的模板名称/For example, if you are using the default system template, the path may be/template/default/base.html