As an experienced website operations expert, I know that how to present technical information efficiently and beautifully in increasingly professional content creation is crucial.The continuous optimization of AnQiCMS (AnQiCMS) in content management, especially in supporting Markdown editors, brings 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, and ensure they are displayed correctly.

In Anqi CMS, elegantly insert mathematical formulas and flowcharts: from editing to perfect presentation

In the era 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 present complex mathematical formulas and technical flowcharts intuitively and clearly not only enhances the professionalism of the content but also greatly improves the reader's understanding experience.The auto CMS understands this need and provides an efficient way to achieve this goal by introducing a Markdown editor and flexible template mechanisms.

I. Prologue of Content Creation: Enable Markdown Editing Function

Firstly, to enable your CMS to support mathematical formula and flowchart editing, the first step and the most critical step is to enable the system's Markdown editor.The traditional rich text editor often lacks the ability to handle complex code or specific tags, 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 Settings, and then findContent Settings. On this page, you will see an option forEnable Markdown Editor.Make sure this option is checked and the settings are saved.Once enabled, the editing area of the article content will switch to Markdown mode when you create or edit articles, laying the foundation for the insertion of formulas and flowcharts.

II. Magic in the editing interface: Insert mathematical formulas and flowcharts

The power of the Markdown editor lies in its ability to embed various specific syntax directly in the text, 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$Packaging formula content. For example:$E=mc^2$Will be displayed as\(E=mc^2\).
  2. Block Formula (Block Formula)：For formulas that require independent display and more complex formatting, double dollar signs can be used$$Packaging formula content. For example:
    
$$
\int_a^b f(x) \, dx = F(b) - F(a)
$$
    This will display the formula centered and separately, usually with a larger font size and better readability.

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

Draw a flowchart

The drawing of flowcharts, we usually rely on Mermaid syntax.Mermaid allows you to create various charts, including flowcharts, sequence diagrams, Gantt charts, and more, through simple text descriptions.mermaidAs a language identifier.

Here is a simple Mermaid flowchart example:

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

You only need to copy and paste this text into the code block of the AnQi CMS Markdown editor, and selectmermaidAs a language type. The editor will identify it as a Mermaid chart.

Three, ensure perfect presentation: configuration of template files and content rendering

Just entering this syntax in the editor is not enough to make it display on the website front end.The browser does not understand LaTeX or Mermaid directly.They need to use JavaScript libraries to parse and render.This requires us to make some necessary modifications to the website template files.base.html1. This is a common skeleton file of AnQi CMS template.)

1. Import Markdown default style (optional but recommended)

Although it is not directly related to formulas and flowcharts, for the overall reading experience of the content, you can consider introducing a set of aesthetically pleasing Markdown rendering styles. For examplegithub-markdown-cssIn 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. Similarly 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 property can ensure that the script loads in the background without blocking the page rendering, improving user experience.

3. Enable flowchart display: Integrated with Mermaid

Mermaid chart also needs a JavaScript library to convert its text description into a visual graphic. Inbase.htmlthe file</body>the label before(or}<head>In, but considering performance it is recommended to place at the bottom of the page), add the following<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"This indicates that it is an ES module script,mermaid.initialize({ startOnLoad: true });Then tell Mermaid to automatically find and render charts when the page is loaded.

4. Ensure correct rendering of content: UserenderandsafeFilter

Configure the frontend library first, and then there is a key step to render the article content correctly in your template file. The article content field in Anqi CMS (usuallyContentIn Markdown mode, it stores text in Markdown format.To ensure that these Markdown texts, including the formulas and flowcharts within them, are correctly parsed and rendered by the browser, you need to use specific filters when invoking the content.

In the template for displaying article details (for examplearchive/detail.htmlor a custom article detail template), when you obtain the article content througharchiveDetailthe tag, please make sure to applyContentto therenderand `safe`