How to enable Markdown editor and display mathematical formulas and flowcharts in AnQiCMS?

As an experienced website operation expert, I know that content quality is the core to attract and retain users.In an efficient and flexible content management system like AnQiCMS, fully utilizing its various functions to enrich content expression is crucial for enhancing the professionalism and user experience of the website.Today, let's delve into a very practical advanced topic: how to enable the Markdown editor in AnQiCMS and make your mathematical formulas and flowcharts beautifully present on the web.

AnQiCMS is an enterprise-level content management system developed based on the Go language, committed to providing an efficient, customizable, and scalable content management solution.It not only focuses on SEO optimization, but also provides powerful content editing capabilities.For websites that need to publish technical articles, educational content, product descriptions, or any website involving complex logic display, the ability to natively support mathematical formulas and flowcharts is undoubtedly a wing to the tiger.With simple configuration, AnQiCMS can convert ordinary Markdown text into dynamic content with both professionalism and aesthetics.

First step: Unlock the powerful features of the Markdown editor

First, we need to enable the Markdown editor in the AnQiCMS backend. This unlocks a more powerful arsenal for your content creation.

To enable it, please log in to your AnQiCMS admin interface and then navigate toGlobal Settings, then clickContent settings. On this page, you will find an option called "Enable Markdown Editor". Check this option and save the settings.

After completing this step, when you create or edit articles, single pages, and other content, you will find that the content editing area is no longer a traditional rich text editor, but has become a text box that supports Markdown syntax.This means you can use Markdown's concise markup language to organize content, including titles, lists, code blocks, links, and images, etc.

Second step: Draw mathematical formulas and flowcharts in the content

After enabling the Markdown editor, you can directly write mathematical formulas and flowcharts in the content.AnQiCMS integrates popular rendering libraries to display special content in a clear and professional manner.

1. Write a mathematical formula

For mathematical formulas, AnQiCMS supports widely used LaTeX syntax. You can insert formulas in the following two ways:

• Inline formula: If you want to insert a short formula into a text paragraph, you can use a single dollar sign$Enclose the formula. For example：当 $a \ne 0$ 时，一元二次方程 $ax^2 + bx + c = 0$ 的根为 $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$。
• Block formulaFor complex formulas that need to be displayed independently, centered, and may contain multiple lines, use double dollar signs$$Enclose the formula. For example：

  
  $$
  \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
  $$
  

In the editing interface, you see LaTeX source code, but once the front-end is properly configured, they will be rendered into beautiful mathematical symbols on the web.

2. Describe the flowchart

The flowchart can be implemented using Mermaid syntax.Mermaid is a text-based drawing tool that allows you to create various charts using simple code, including flowcharts, sequence diagrams, and more.Its advantage lies in the ease of writing, version control friendly, and automatic layout.

For example, a simple website registration process can be represented using Mermaid:

graph TD;
    A[User opens registration page] --> B{Enter registration information};
    B --Valid information--> C[Send verification code];
    C --> D{Enter verification code};
    D --Verification successful--> E[Registration successful];
    B --Invalid information--> A;
    D --Verification failed--> C;

You just need to paste this code into the content area of the Markdown editor.

Step 3: Configure the front-end template to bring formulas and flowcharts to life.

Although you have enabled the Markdown editor in the background and written the content correctly, the browser itself cannot directly understand and render the syntax of LaTeX formulas or Mermaid flow charts.In order for this content to be perfectly presented on the front-end page, we need to introduce some JavaScript libraries and CSS styles.This step requires you to modify your website template file.

AnQiCMS template files are usually stored in/templatethe directory, wherebase.htmlis a general basic template file, often inherited or included by other pages. Inbase.htmlthe file<head>Add the following code within the tag is **practical, which ensures that all pages can load the required rendering resources.

1. Apply the default Markdown style

To make the rendered content of Markdown more neat and standardized, we can introduce a universal Markdown stylesheet, such as the GitHub style 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" />

Add this line of code tobase.htmlof<head>Tag inside.

2. Ensure that the mathematical formula is displayed correctly

To render LaTeX mathematical formulas, we need to include the MathJax library.MathJax can parse LaTeX syntax in web pages and convert it into high-quality mathematical symbol images.

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

Similarly, add this line of code tobase.htmlof<head>Tag inside.asyncProperty ensures that the script loads asynchronously without blocking the page rendering

3. Make the flow chart come alive

For Mermaid flowcharts, we need to import the Mermaid library and initialize it.

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

Add this JavaScript code tobase.htmlof<head>Tag inside.startOnLoad: trueThe option tells Mermaid to automatically scan and render Mermaid charts on page load.

After completing these template modifications, remember to clear the AnQiCMS system cacheLog in to the admin panel, click the 'Update Cache' option to ensure that your website is loading the latest template files.

Summary

By following these three simple steps - enabling the Markdown editor, writing formulas and flowcharts in the content, and configuring the front-end template - you can easily publish high-quality content in AnQiCMS that includes professional mathematical formulas and intuitive flowcharts.This can greatly enhance the professionalism and readability of the content, and it can also help your website establish stronger authority and influence in a specific field.The flexibility and scalability of AnQiCMS allow content operators to deliver knowledge and information to their target audience more efficiently and in a more diverse manner.

Frequently Asked Questions (FAQ)

Q1: Have I followed the steps correctly, but the mathematical formulas and flowcharts still do not display? A1:If you encounter this situation, please check the following:

1. Backend Settings ConfirmationEnsure that you have correctly checked 'Enable Markdown Editor' in the 'Global Settings' -> 'Content Settings' on the AnQiCMS backend.
2. Syntax check: Make sure that your document content uses the correct LaTeX math formula syntax ($公式$or$$公式$$) and Mermaid flowchart syntax. Syntax errors will cause rendering to fail.
3. Template file check: Confirm that the changes you made are correctbase.htmlTemplate file, and all CDN