How to correctly display Markdown formatted mathematical formulas and flowcharts in AnQiCMS?
For users who frequently need to publish technical articles, tutorials, or academic content, Markdown editors are undoubtedly a tool to improve efficiency.Its concise syntax makes content creation intuitive and fast. AnQiCMS, as a modern content management system, naturally also fully considers the use cases 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 functionality of Markdown itself is not enough.At this point, we need to use 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 to perfectly display mathematical formulas and flowcharts on your website.
Enable AnQiCMS Markdown Editor
Before using these advanced features, the first step is to ensure that the AnQiCMS background Markdown editor is enabled. You just need to go toAnQiCMS backend, navigate toGlobal Settingsand then clickContent 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 that you can use Markdown syntax when editing the document content.
Introduce a common style 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.Recommend usinggithub-markdown-cssIt can provide a concise style similar to GitHub.
You need to make some minor changes in the AnQiCMS template file. Specifically, please find the template directory you are currently using under thebase.htmlThe file. This file is usually the basic skeleton shared by all pages of a website. In<head>Add the following code within the tag:
<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 handle the display of mathematical formulas. Writing mathematical formulas in Markdown 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 need tobase.htmlthe file<head>Partly added 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 the flow chart correctly on the web page
Flowcharts are another very practical visual tool in technical documentation.AnQiCMS integrates Mermaid.js to support Markdown flowcharts.Mermaid allows you to use a concise text syntax to describe various diagrams, including flowcharts, sequence diagrams, and so on.
You will also need to enable this feature.base.htmlof<head>Add Mermaid script reference in the tag. 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 a flowchart in Markdown content. For example, a simple flowchart can be written as:
graph TD;
A[Start] --> B{Decision?};
B -- Yes --> C[Perform action];
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 AnQiCMS Markdown editor.Just follow the corresponding Markdown or Mermaid syntax rules for writing, and the system will automatically recognize and correctly display these elements during rendering.This one-time configuration, everywhere usage convenience, greatly enhances the efficiency and expression of content creation.
Through a simple few steps of configuration, AnQiCMS can upgrade ordinary Markdown content to support complex mathematical formulas and beautiful flowcharts into rich media documents.This not only enriches the form of your content, but also brings a more intuitive and efficient reading experience for readers, especially suitable for websites focusing on technical sharing, education and training, or scientific research.Try these powerful features immediately to take your AnQiCMS site to the next level!
Frequently Asked Questions (FAQ)
Q: I have followed the steps, but the mathematical formula or flow chart still cannot be displayed. What should I do?A: First, make sure you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" of AnQiCMS. Next, check carefully.
base.htmlIs the CDN script path included in the file completely correct, includinghttporhttps、version number, any character error may cause loading failure.The CDN service may be unstable at times, you can try clearing the browser cache (Ctrl+F5) or changing the CDN source (if MathJax and Mermaid support multiple sources).Finally, confirm that the syntax of the formulas and flowcharts you are using in the Markdown editor is standard and correct, you can refer to the official documents of MathJax and Mermaid for verification.Q: Does AnQiCMS support other types of Markdown extensions, such as Gantt charts, sequence diagrams, and so on?A: The Mermaid.js mentioned in the text itself supports various chart types, very powerful, in addition to flowcharts (
graph), it also supports sequence diagrams (sequenceDiagram), and class diagrams (classDiagramGantt Chart"),gantt）et al. As long as the syntax that the Mermaid library can parse is correctly introduced into the Mermaid script, the Markdown editor of AnQiCMS usually supports it.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.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