How to add mathematical formulas and flowcharts in the Anqi CMS editing interface and ensure correct display?

As an experienced website operations expert, I know that it is crucial to present technical information efficiently and beautifully in the increasingly professional content creation.Continuous optimization of AnQiCMS (AnQiCMS) in content management, especially in supporting Markdown editors, has brought us great convenience.Today, let's delve into how to add mathematical formulas and flowcharts to your article content in the Anqi CMS editing interface, ensuring they are displayed correctly.

Elegantly insert mathematical formulas and flowcharts in AnQi CMS: from editing to perfect presentation

In the age of information explosion, high-quality content is the core to attract and retain users.For websites involving the fields of science, technology, engineering, or mathematics (STEM), the ability to clearly and intuitively present complex mathematical formulas and technical flowcharts not only enhances the professionalism of the content but also greatly improves the reader's understanding experience.AnQi CMS knows this need, by introducing a Markdown editor and flexible template mechanism, it provides us with an efficient way to achieve this goal.

I. Prologue of content creation: Enable Markdown editing function

First, to enable your anqi CMS to support the editing of mathematical formulas and flowcharts, the first step and the most critical step is to enable the system's Markdown editor.Traditional rich text editors often struggle with complex code or specific markup, while Markdown, with its concise and structured syntax, has become the ideal choice for technical content creators.

You need to log in to the AnQi CMS backend and navigate toGlobal Settingsand then findContent settings. On this page, you will see an option toEnable Markdown editorMake sure this option is checked and the settings are saved. Once enabled, when creating or editing articles, the article content editing area will switch to Markdown mode, laying the groundwork for the insertion of formulas and flowcharts later on.

II. The magic of the editing interface: insert mathematical formulas and flowcharts

The strength of Markdown editors lies in their ability to directly embed various specific syntaxes, including LaTeX syntax for mathematical formulas and Mermaid syntax for flowcharts.

Add mathematical formula

Mathematical formulas usually use LaTeX syntax for writing. In Markdown, you can insert them in the following two ways:

1. Inline FormulaIf you want to insert a short formula in a regular text line, you can use a single dollar sign$Enclose formula content. For example:$E=mc^2$It will be displayed as(E=mc^2).
2. Block Formula: For formulas that need to be displayed independently with more complex formatting, double dollar signs can be used$$Enclose formula content. For example:

   
   $$
   \int_a^b f(x) \, dx = F(b) - F(a)
   $$
   

   This will display the formula centered and alone, usually with a larger font size and better readability.

In the AnQi CMS Markdown editor, you just need to enter these LaTeX syntax directly.The editor will recognize these tags, but to render them correctly as readable mathematical expressions on the front-end page, further configuration is required.

Draw a flowchart

The drawing of flowcharts, we usually use Mermaid syntax.Mermaid allows you to create various diagrams through simple text descriptions, including flowcharts, sequence diagrams, Gantt charts, and so on.In Markdown, Mermaid diagrams need to be placed within a special code block, usually withmermaidAs a language identifier.

Here is a simple Mermaid flowchart example:

graph TD;
    A[Start] --> B{Select Operation};
    B -- Yes --> C[Perform Operation];
    C --> D[End];
    B -- No --> D;

You just need to copy and paste this text into the Anqi CMS Markdown editor's code block and selectmermaidAs a language type. The editor will recognize it as a Mermaid chart.

3. Ensure perfect presentation: configuration and content rendering of template files.

Just typing these syntax in the editor is not enough to make them display on the website front end.The browser does not understand LaTeX or Mermaid directly.They need to use a JavaScript library to parse and render.This requires us to make some necessary modifications to the website template.Generally, these changes will be made in the public header or footer template files of the website (such asbase.htmlThis is the common skeleton file for Anqi CMS template.

1. Introduce the default Markdown style (optional but recommended)

Although it is not directly related to the formula and flowchart, for the overall reading experience of the content, you may consider introducing a set of beautiful Markdown rendering styles. For examplegithub-markdown-css. In yourbase.htmlthe file<head>tag, add the following.<link>Tags:

<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" />

2. Enable math formula display: Integrated MathJax

MathJax is one of the most popular Web mathematical formula rendering engines. It can parse LaTeX syntax and render high-quality mathematical expressions. Also inbase.htmlthe file<head>tag, add the following.<script>Tags:

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

asyncThe attribute can ensure that the script loads in the background without blocking page rendering, improving user experience.

3. Enable flowchart display: Integrated with Mermaid

Mermaid charts also need a JavaScript library to convert their text descriptions into visual graphics. Inbase.htmlthe file</body>the tag before(or<head>Inside, but considering performance, it is recommended to add the following at the bottom of the page)<script>code block:

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

Heretype="module"Indicates that this is an ES module script, butmermaid.initialize({ startOnLoad: true });Tell Mermaid to automatically find and render charts after the page is loaded.

4. Ensure correct rendering of content: userenderandsafeFilter

After configuring the front-end library, there is still a key step to correctly render the article content in your template file. The article content field of Anqi CMS is usuallyContent) In Markdown mode, it stores Markdown formatted text.In order for these Markdown texts, including formulas and flowcharts, to be correctly parsed and rendered by the browser, you need to use specific filters when calling the content.

In the template for displaying article details (for examplearchive/detail.htmlor a custom article detail template), when you retrieve the article content through thearchiveDetailtag, be sure to handleContentField applicationrenderand `safe