As an experienced website operation expert, I know that content quality is the core of attracting and retaining users.In such an efficient and flexible content management system as 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 presented on the web.

AnQiCMS as an enterprise-level content management system developed based on Go language, is dedicated to providing efficient, customizable, and easy-to-expand content management solutions.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 native support for mathematical formulas and flowcharts is undoubtedly a blessing in disguise.Through simple configuration, AnQiCMS can convert ordinary Markdown text into dynamic content with both professionalism and aesthetics.

First step: Unlock the powerful capabilities of Markdown editor

Firstly, we need to enable the Markdown editor in the AnQiCMS backend. This is as if we have unlocked a more powerful arsenal for your content creation.

To enable it, please log in to your AnQiCMS backend management interface, then navigate toGlobal Settingsand then clickContent Settings. In 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.

第二步：在内容中绘制数学公式与流程图

Enabled Markdown editor, you can directly write mathematical formulas and flowcharts in the content.AnQiCMS by integrating popular rendering libraries allows these special content to be displayed in a clear and professional manner.

1. 编写数学公式

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 brief formula in a text paragraph, you can use a single dollar sign$To enclose a formula. For example:当 $a \ne 0$ 时，一元二次方程 $ax^2 + bx + c = 0$ 的根为 $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$。
  • [en]Block Formula：For complex formulas that need to be displayed independently, centered, and may contain multiple lines, use double dollar signs$$To enclose a formula. For example:
    
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

In the editing interface, what you see is LaTeX source code, but once the front-end is correctly configured, they will be rendered as 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 with simple code, including flowcharts, sequence diagrams, and so on.Its advantage lies in ease of writing, version control friendly, and automatic layout.

For example, a simple website registration process can be represented as follows 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 make the formula and flow chart jump out of the screen.

Although you have enabled the Markdown editor in the background and written the content correctly, the browser itself cannot understand and render the syntax of LaTeX formulas or Mermaid flow charts directly.In order to display these contents perfectly 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/templateIn the directory, there arebase.htmlis a general basic template file, often inherited or included by other pages.base.htmlthe file<head>Tags inside add the following code is**practice**, 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 tidy and standardized, we can introduce a universal Markdown stylesheet, such as the Markdown CSS in GitHub style.

<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>Tags 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 the page 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>Tags inside.asyncProperties ensure that the script loads asynchronously, without blocking page rendering.

3. Make the flowchart vivid

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>Tags inside.startOnLoad: trueThe configuration options will tell Mermaid to automatically scan and render Mermaid diagrams on the page after it has finished loading.

Complete these template modifications and remember to clear the AnQiCMS system cache. Log in to the admin backend, click the "Update Cache" option to ensure that your website is loading the latest template files.

Summary

Through the above 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 containing professional mathematical formulas and intuitive flowcharts in AnQiCMS.This can not only greatly enhance the professionalism and readability of the content, but also help your website establish stronger authority and influence in a specific field.The flexibility and scalability of AnQiCMS enable content operators to deliver knowledge and information to the target audience in a more efficient and diverse manner.

Common Questions (FAQ)

Q1: I have followed the steps, but the mathematical formula and flow chart still do not display. What should I do? A1:If you encounter this situation, please perform the following checks:

  1. Backend settings confirmationEnsure that you have correctly checked 'Enable Markdown editor' in the 'Global Settings' -> 'Content Settings' on the AnQiCMS backend.
  2. Grammar check：Please carefully check if your document content uses the correct LaTeX math formula syntax ($公式$or$$公式$$) and Mermaid flowchart syntax. Syntax errors will cause rendering failure.
  3. Template file checkConfirm that you have modified the correct onebase.htmlTemplate file, and all CDN