How to use Markdown editor to display mathematical formulas and flowcharts in AnQi CMS?
In website operations, we often need to display some content that includes mathematical formulas or complex flowcharts, which not only makes information delivery more accurate, but also greatly enhances the professionalism and readability of the article.AnQi CMS understands this need, for this reason it has built-in support for Markdown editors, and combined with external libraries, allows us to easily present these professional contents in articles.
Enable Markdown editor
To write content using the Markdown editor, first make sure that the Markdown editor is enabled in the AnQiCMS backend.This is usually found in the 'Content Settings' under 'Global Settings'.After enabling it, you can choose the Markdown mode when editing article content, and enjoy its concise and efficient writing experience.
Write formulas and flowcharts in Markdown
After enabling the Markdown editor, we can directly insert mathematical formulas and flowcharts into the article content.
For mathematical formulas, we usually use LaTeX syntax to write them and enclose them with specific symbols. For example, in-line formulas can be used$ E=mc^2 $This style will be displayed side by side with other content in the text. For complex formulas, if you want them to be displayed independently and centered in a separate paragraph, you can place them on an independent line and enclose them with double dollar signs, like this:
$$
\sum_{i=1}^{n} (x_i - \bar{x})^2
$$
This will tell the system that this is a block-level formula that needs to be rendered separately.
The flowchart can be implemented using Mermaid syntax.Mermaid is a simple and easy-to-learn text to chart conversion tool that allows us to define the structure of flowcharts with code.In Markdown, we just need to mark the code block asmermaidJust like that. For example, a simple flowchart might look like this:
```mermaid
graph TD
A[开始] --> B{判断};
B -- 是 --> C[执行操作];
C --> D[结束];
B -- 否 --> D[结束];
```
In this way, we can clearly express complex logic and steps in a plain text environment.
Let them display correctly on the web: integrate third-party libraries
Although we have written mathematical formulas and flowcharts correctly in Markdown, the browser itself cannot directly recognize and beautifully render these special Markdown syntaxes.In order for them to be correctly parsed and displayed on the web page, we need to use some powerful third-party JavaScript libraries and include them in the public template file of our website.In AnQiCMS, this public template file is usuallybase.htmlBecause it includes the website's header, footer, and other common elements, ensuring that the imported libraries can take effect on all pages.
Default Markdown styleTo make the rendered content of Markdown have better visual effects, you can introduce the GitHub style Markdown stylesheet. Add the following code to
base.htmlthe file<head>Inside 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 will provide a clean, easy-to-read typography for Markdown content.
Display of mathematical formulasTo make a web page able to parse and display LaTeX-formatted mathematical formulas, we can use the MathJax library. Add this JavaScript code to
base.htmlthe file<head>Tag within, best placed before other scripts, or immediately after Markdown style:<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>This script will asynchronously load MathJax and automatically scan and render mathematical formulas after the page is fully loaded.
The display of flowchartsMermaid flowchart rendering requires the introduction of the Mermaid library itself and its initialization. Similarly, add the following code before
base.htmlthe file<head>tags or<body>the tag ends:<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 will import Mermaid in module way and call
initializemethod, wherestartOnLoad: trueindicating that Mermaid will automatically find and render all marked after the page loadsmermaidThe code block.
Complete workflow overview
In summary, the steps to display mathematical formulas and flowcharts in AnQiCMS can be summarized as:
- In the AnQiCMS backend's 'Global Settings' -> 'Content Settings'.Enable Markdown editor.
- When editing an article, select Markdown mode and use.Writing mathematical formulas in LaTeX syntax(inline)
$, block level$$), andWriting flowcharts in Mermaid syntax(`mermaidCode block). - Edit the website'sPublic template file
base.html, in<head>Inside or (or<body>Before ending, introduce GitHub Markdown style, MathJax script, and Mermaid script as well as initialization code.
After completing these steps, the mathematical formulas and flowcharts in the content you publish will be beautifully displayed on the website, which will greatly enhance the expressiveness and professionalism of your website content.
Frequently Asked Questions (FAQ)
Ask: I have written formulas and flowcharts in Markdown and also enabled the Markdown editor, but why is it still displayed as plain text code on the page?Answer: This is very likely because you forgot to
base.htmlThe external JavaScript libraries for MathJax and Mermaid are introduced in the public template file.The browser cannot understand these special syntaxes directly; it needs these libraries to parse and render them.Please follow the method provided in the article to ensure that the relevant script has been correctly added to your template file.Question: Can these JavaScript libraries be downloaded to the local server instead of using CDN?Of course you can. The CDN link provided in the article is for convenience and speed.If you are considering performance optimization, security, or want to work offline as well, you can completely download these libraries to the static resource directory of your website and then
base.htmlcorrespondingsrcandhrefModify the path to the local resource path. Please note that the Mermaid library may require ESM module import methods, and the path must be correct during localization.Ask: I only want to display mathematical formulas, not flowcharts, is that okay?Answer: No problem at all. You can selectively import the required libraries according to your needs. For example, if you only need to display mathematical formulas, then only
base.htmlYou can include the MathJax script without including the related script for Mermaid.Similarly, if you do not need GitHub Markdown style, you can also omit that line of CSS inclusion code.