In content creation, especially in technical articles, academic papers, or project documents, we often need to display complex mathematical formulas and clear flowcharts to enhance the professionalism and readability of the content.For users of AnQiCMS, this is indeed a very practical need.Then, does AnQi CMS support displaying mathematical formulas and flowcharts in article content?The answer is affirmative, and it is not complex to implement.

AnQi CMS provides flexible and diverse content management methods for content creators, one of its core features is the built-in Markdown editor.Markdown itself provides a simple text markup language that can be used to write mathematical formulas (usually in LaTeX syntax) and flowcharts (usually in Mermaid syntax).However, Markdown only provides the syntax for writing these special contents, and in order to render them beautifully on the web page, support from a front-end rendering library is also needed.AnQi CMS cleverly utilizes this point, by introducing these rendering libraries in the template, making mathematical formulas and flow charts present perfectly.

Enable Markdown editor

First, make sure that your CMS backend has enabled the Markdown editor. This is the basis for displaying mathematical formulas and flowcharts. You canBackend -> Global Settings -> Content SettingsFind and check the option to enable Markdown editor. Once enabled, you can use Markdown syntax to write content in the article editing interface.

Render mathematical formula

Mathematical formula written in Markdown, for example, inline formula expressed in LaTeX syntax$E=mc^2$or block-level formula$$ \int_a^b f(x) dx $$It requires a dedicated JavaScript library to convert it into a visible graphic. MathJax, commonly used in the industry, is such a powerful tool.

In order for the Anqi CMS website to correctly render mathematical formulas, we need to place the general template file (usuallybase.html）的<head>Add MathJax references within the tag. This is usually done through CDN services to ensure loading speed and stability. You just need to add the following code snippet tobase.htmlIn:

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

This code will asynchronously load the MathJax library to process mathematical formulas on the page without blocking the page rendering.

Display flowchart

Similar to mathematical formulas, flowcharts also require a frontend library to convert their text descriptions into graphics.Mermaid.js is one of the most popular choices, allowing you to define flowcharts, sequence diagrams, Gantt charts, and more with simple text syntax.

To display a flowchart in AnQi CMS, you also need tobase.htmlthe file<head>add the reference and initialization code for Mermaid.js in the tag:

<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 in module mode and initializes it automatically after the page is loaded, thereby rendering the Mermaid flowchart code block in the page.

Optimize display style

Although MathJax and Mermaid can correctly render formulas and flowcharts, in order to make them and the entire Markdown content more visually beautiful and unified, we can introduce a set of universal Markdown CSS styles.For example, GitHub's Markdown style is very popular.

You canbase.htmlof<head>Add the following link within the tag, before other style sheets, to include GitHub Markdown CSS:

<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 way, your Markdown content will have better formatting and visual effects when displayed.

points to note in actual operation

All these configurations require a one-time modification of the template file. The template files of Anqi CMS are usually located in the root directory of the project,/templatein the folder,base.htmlIt is one of the common general layout files.base.htmlThe modification will affect all pages inheriting the layout. These front-end libraries are loaded via CDN (Content Delivery Network), which not only relieves the burden on your server but also accelerates the loading speed when users access.

After completing these configurations, you can use Markdown syntax to freely write mathematical formulas and flowcharts in the content of Anqi CMS articles. For example, insert in the article:

这是一个行内公式：$a^2 + b^2 = c^2$

$$
\begin{aligned}
\dot{x} &= \sigma(y - x) \\
\dot{y} &= \rho x - y - xz \\
\dot{z} &= -\beta z + xy
\end{aligned}
$$

```mermaid
graph TD
    A[开始] --> B{条件判断?};
    B -- 是 --> C[执行操作1];
    B -- 否 --> D[执行操作2];
    C --> E[结束];
    D --> E;

The strength of AnQi CMS lies in its customizability and extensibility, which can greatly enrich the expression of content through the introduction of a simple frontend library.

Frequently Asked Questions (FAQ)

  1. Ask: Do I need to install additional AnQi CMS plugins to support the display of mathematical formulas and flow charts?Answer: No need. Anqi CMS itself supports Markdown editor, and the rendering of mathematical formulas and flowcharts is completed by introducing third-party JavaScript libraries (such as MathJax and Mermaid.js) on the front-end page, which are all general front-end technologies, and no additional Anqi CMS backend plug-ins need to be installed.

  2. Ask: Where should I add these JavaScript and CSS reference codes in the template file?Answer: It is recommended to use MathJax and Mermaid.js'<script>tags as well as GitHub Markdown CSS'<link>Labels are placed in the general template file of your website (for examplebase.html）的<head>within the tags. This ensures that these libraries are parsed before the page content is loaded, allowing the page content to be rendered correctly.

  3. Ask: If I do not enable the Markdown editor in the Anqi CMS background, can formulas and flowcharts in articles still be displayed normally?Answer: No. Enabling the Markdown editor is the basis for parsing these special syntaxes.If not enabled, the system will treat your formula and flowchart code as plain text, even if a rendering library is introduced on the front end, it will not be able to recognize it and convert it into graphics.