Hello!As a website operator who is deeply familiar with the operation of AnQiCMS, I fully understand the importance of displaying complex information such as mathematical formulas and flowcharts in content creation.High-quality, interactive content is the key to attracting and retaining users.I will elaborate in detail on how to enable the Markdown editor in AnQiCMS and ensure that mathematical formulas and flowcharts are displayed correctly.

In AnQiCMS, enable the Markdown editor and correctly display mathematical formulas and flowcharts

In AnQiCMS, we fully understand the importance of rich content display in enhancing user experience and content value.New AnQiCMS introduces support for Markdown editors to content creators, which greatly simplifies the formatting of content and provides the possibility of inserting mathematical formulas and flowcharts.To make full use of these features, we need to perform simple configuration on the backend and introduce the necessary third-party libraries in the front-end template.

Enable Markdown Editor

Firstly, we need to activate the Markdown editor in the AnQiCMS backend.This is a simple step, make sure your content input interface can recognize and handle Markdown syntax.

You need to navigate to the management backend of AnQiCMS,Global Settingsthen selectContent SettingsIn the content settings page, you will find an option toEnable Markdown EditorTick this option and save the settings, and you can use Markdown for creation in the document editing interface.

Apply Markdown default styles to web page content

Markdown content display on the front end requires some basic CSS styles to beautify it and make it more readable.We can use external CDN resources, such as GitHub's Markdown style, to quickly provide an elegant visual presentation for our Markdown content.

To apply these styles, you need to edit the universal template file of the website, usuallybase.htmlfile.<head>Label's internal, add the following CSS link:

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

So, your Markdown content will get a neat and professional default style, similar to the Markdown rendering effect on GitHub.

正确显示数学公式

For websites that need to display complex mathematical expressions, such as tutorials, scientific research, or educational content, correctly rendering mathematical formulas is crucial.AnQiCMS by integrating the MathJax library, can convert mathematical formulas written in LaTeX syntax into clear and high-quality layouts.

要使数学公式在网页上正确显示，你同样需要在base.htmlthe file<head>标签内，添加MathJax的JavaScript引用：

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

Once MathJax is integrated, you can use LaTeX syntax to write mathematical formulas in the Markdown editor. For example, inline formulas can be used$包裹，如$E=mc^2$；块级公式可以使用$$包裹，如$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$.

正确显示流程图

Flowcharts are the visual representation of business logic, algorithm steps, or complex system architecture, which is very helpful for improving the understandability of content.AnQiCMS supports rendering flowcharts, sequence diagrams, and more based on text descriptions through the Mermaid library.

为了在网页上正确显示流程图，你需要在base.htmlthe file<head>Label inside, add Mermaid's JavaScript code: 

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

After configuration, you can use Mermaid's specific syntax to create flowcharts in Markdown content. For example, a simple flowchart can be represented in the following way:

graph TD
    A[Start] --> B{Decision?};
    B -- 是 --> C[Action];
    C --> D[End];
    B -- 否 --> E[Wait];
    E --> B;

Content creation注意事项

In Markdown editor, make sure the mathematical formulas and flowchart syntax you use are correct, and strictly follow the LaTeX and Mermaid specifications.The content management system of AnQiCMS is responsible for converting Markdown content to HTML, and the CDN script we introduce will further render these special contents on the browser side.

In addition, use in templatesarchiveDetailorpageDetailTag output including Markdown contentContentWhen the field value contains HTML tags (which Markdown converts to), to avoid browsers from automatically escaping them, we usually work with|safeA filter to ensure that the HTML structure is rendered correctly. For example:{{articleContent|safe}}。If the Markdown editor is enabled, the system will automatically convert Markdown to HTML. If you want to manually control whether to convert,ContentField label also supportsrender=true(Force conversion) orrender=false(No conversion) parameter.

Through these steps, your AnQiCMS website will be able to provide more rich and professional Markdown content display, including beautiful mathematical formulas and clear flowcharts, greatly enhancing the user's understanding of the content and the professional image of the website.

Common Questions and Answers (FAQ)

1. Why is the mathematical formula and flow chart not displayed on the front-end page even though I have enabled the Markdown editor?

Even if you have enabled the Markdown editor in the AnQiCMS backend and used the mathematical formula (LaTeX) or flowchart (Mermaid) syntax correctly, they still require the corresponding JavaScript library for rendering on the front-end page. Make sure you have followed the instructions in this document,base.htmlTemplate file's<head>Tags correctly introduce CDN links for MathJax and Mermaid. Without these client rendering libraries, the browser will not be able to recognize and display these complex elements.

2. Inbase.htmlAfter adding the CDN link, what if the website access speed is affected by the CDN?

The external CDN service is convenient, but its loading speed may be affected by the user's location or network conditions. If you find that the CDN loads slowly and causes page rendering delay, you can consider downloading these JS/CSS files to your own server and modifyingbase.htmlThe path points to local resources.This can better control the resource loading speed, especially when facing users in specific regions.Please note that self-hosting requires you to be responsible for updating and maintaining files.

3. What Markdown syntax does the Markdown editor support? How can you learn these syntaxes?

AnQiCMS's Markdown editor supports standard Markdown syntax, including titles, lists, links, images, code blocks, citations, etc.On this basis, it also supports LaTeX mathematical formulas and Mermaid flowcharts/sequence diagrams through integration with MathJax and Mermaid.You can refer to the official Markdown tutorial (such as the GitHub Flavored Markdown guide), the beginner's guide to LaTeX, and the official Mermaid documentation to learn these advanced syntaxes.usually, online Markdown editors also provide real-time preview functionality, which can help you quickly master and debug syntax.