In modern content operation, the professionalism and readability of content are equally important.Especially when our website involves fields such as technology, education, engineering, etc., how to clearly and beautifully present complex mathematical formulas or logically rigorous flowcharts in articles often becomes the key to improving user experience.Auto CMS knows this need, by integrating a powerful Markdown editor and combining it with simple frontend configuration, your website can easily present these professional contents.

Step 1: Enable Markdown Editor

To start using mathematical formulas and flowcharts in your security CMS website, you first need to make sure that the Markdown editor is enabled.This is like adding a new skill to your content creation toolkit.

  1. Log in to the Anqi CMS backend.
  2. Navigate to the "Background Settings
  3. In this page, you will find an option for 'whether to enable Markdown editor'. Please make sure to check or turn it on.

Enable Markdown editor, and when you create or edit content in "Publish documents" or "Page management", you can choose to use Markdown mode for creation.Markdown with its concise syntax, can help us organize content more efficiently, focusing on the text and logic itself rather than the complex layout details.

第二步：In content, insert mathematical formulas and flowcharts.

Markdown editor supports using specific syntax to insert mathematical formulas and flowcharts.

Insert mathematical formulas:

The Markdown editor of Anqi CMS supports LaTeX syntax for writing mathematical formulas. You can choose inline formulas or block-level formulas as needed.

  • Inline formula:Using a single dollar sign$Wrap the formula. For example, if you want to insert a famous physics formula into a paragraph of text, you can write it like this: $E=mc^2$.
  • Block formula:Use double dollar signs$$Wrap the formula, which will display the formula as a separate line and default to centered alignment. For example, the root-finding formula of a quadratic equation can be written like this:
    
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Insert flowchart:

The flowchart is defined using Mermaid syntax.Mermaid provides a concise text-based way to draw various charts, including flowcharts, sequence diagrams, and so on.

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

You only need to paste the above code directly into the content area of the Markdown editor.

Step 3: Configure the website frontend to display correctly

Although you have inserted these special syntaxes in the background, the browser itself cannot directly recognize and render LaTeX formulas or Mermaid charts.To ensure they are displayed correctly and beautifully on your website's frontend pages, we need to introduce some additional JavaScript libraries to act as 'translators' and 'rendering engines'.

These configurations are usually in your website template'sbase.htmlthe file<head>completed within the tags to ensure that these scripts can take effect when the page is loaded.

  1. Introduce unified and beautiful styles for Markdown content (optional but recommended)To make the entire Markdown content present a more professional and consistent visual effect on the front end, you can introducegithub-markdown-cssThis not only beautifies the text around mathematical formulas and flowcharts, but also enhances the overall reading experience. Inbase.htmlthe file<head>add:

    <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. Introduce MathJax support for rendering mathematical formulasMathJax is a widely used open-source JavaScript rendering engine, specifically designed to display high-quality mathematical formulas in web browsers.With it, your LaTeX formula can be correctly interpreted and rendered by the browser.base.htmlthe file<head>Add the following script inside the tag:

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

  3. Introduce Mermaid support for rendering flowchartsThe Mermaid library is the core for parsing and rendering Mermaid syntax.Through introducing it, the flowchart you write in Markdown can be converted into a visual graph.base.htmlthe file<head>Add the following script inside 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>

    Please note,mermaid.initialize({ startOnLoad: true });This line of code is crucial, it indicates that Mermaid automatically scans and renders all Mermaid diagrams after the page is loaded.

Application and Tips

After completing the front-end configuration, the mathematical formulas and flow charts you insert in the Markdown editor of Anqi CMS backend can be displayed normally on the front-end page.After the content is published or updated, it is recommended that you immediately check the front-end page and pay attention to any error messages in the browser console (open with F12), which helps you locate and resolve any potential issues.Sometimes, you may also need to clear the browser cache (Ctrl+F5 forced refresh) to ensure that the latest front-end configuration and content are loaded.

The Markdown editor of AnQi CMS combined with these powerful frontend rendering libraries brings unprecedented expressiveness to your website content.Whether it is complex theoretical derivation or a clear display of business processes, it can be easily achieved through this concise and efficient method, greatly enhancing the professionalism and user experience of the website.

Common Questions (FAQ)

  1. Why do I follow the steps to configure, but the mathematical formula or flowchart still does not display?First, please make sure that you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" of the AnQi CMS backend. Next, check carefully to ensure that the MathJax and Mermaid inclusion code is accurately placed in your website templatebase.htmlthe file<head>Tag inside.Especially whether the CDN link is correct, and it is not blocked from loading by a firewall or security plugin.In addition, try clearing the browser cache or accessing the page in incognito mode to exclude cache interference.If the issue still exists, please open the browser developer tools (usually press F12), and check the "Console" or "Network" tab for any failed resources or JavaScript error messages, which can help you further diagnose the problem.

  2. Where can I use the Markdown editor?一旦在后台启用了Markdown编辑器，它通常会应用于所有支持富文本编辑的区域，包括“发布文档”（如文章、产品等）和“页面管理”中的内容正文。只要您在编辑内容时，内容输入框下方有切换到Markdown模式的选项，