AnQiCMS provides a flexible and diverse editing experience for content creators, and the introduction of the Markdown editor makes it even more convenient for many users who are familiar with this concise markup language.However, for content that requires special rendering such as mathematical formulas and flowcharts, merely enabling the Markdown editor is not enough.This article will provide a detailed guide on how to enable the Markdown editor in AnQiCMS, and ensure that your web pages can display complex mathematical formulas and flowcharts correctly and beautifully.

一、Enable AnQiCMS Markdown Editor

Enable Markdown editor in AnQiCMS backend is a simple process, it will change the default way you create and edit article content, allowing you to enjoy the efficiency and convenience brought by Markdown.

First, please log in to your AnQiCMS admin interface. In the left navigation menu, find and click on theBackend settings" option, then select "Content SettingsIn this page, you will see an option to switch your content editor. Make sure you have selected “Enable Markdown Editor”Option, and save the settings. After completing this step, you can directly use Markdown syntax to compose content when creating or editing documents.

二、Integrate third-party libraries to ensure correct rendering of mathematical formulas

Markdown syntax itself is concise and efficient, but it does not have native rendering capabilities for complex mathematical formulas.In order for the web page to beautifully display the mathematical formulas written using LaTeX syntax, we need to rely on the powerful third-party JavaScript library—MathJax.

To integrate MathJax, you need to modify your template file. In AnQiCMS,base.htmlFiles are usually the basic skeleton of all pages, and adding code here ensures that all pages have the rendering ability of MathJax.

Please go through the "Template Design" feature in the background, or directly access the server files via FTP/SSH, to find the directory of the template you are currently using,base.htmlthen,<head>Label's internal, add the following MathJax introduction code:

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

This code will asynchronously load the MathJax library. Once loaded, MathJax will automatically scan for mathematical formulas on the page (for example, those using$$...$$or$...$Wrapping LaTeX syntax), and converting it to a clear and professional mathematical typesetting form, ensuring that formulas are displayed correctly and beautifully on any device.

English translation: Three, introduce the flowchart library to make the chart vivid and intuitive

Similar to mathematical formulas, standard Markdown cannot directly render complex flowcharts.This is when we can make use of the powerful JavaScript library, Mermaid.js, which can convert text-based flowchart descriptions into beautiful vector graphics.

Similarly, you will need tobase.htmlthe file<head>Label inside adds the Mermaid.js introduction code. Please add the following content after the MathJax script.

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

This code imports the Mermaid library and initializes it, so it automatically searches and renders flowcharts written in Mermaid syntax when the page loads. You just need to use Mermaid's specific syntax (such as,mermaid ...Using blocks (e.g.,) to describe your flowchart, they will be displayed graphically on the web.

Four, optimize the default styles of Markdown content (optional)

Although MathJax and Mermaid.js solve the rendering problems of formulas and flowcharts, you may still want your Markdown content to be more visually coordinated and unified.github-markdown-css.

Similarly inbase.htmlthe file<head>Label inside, add the following CSS style 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" />

This stylesheet provides a set of beautiful and readable default styles for your Markdown content, making it present in a comfortable reading experience similar to GitHub on the web.

Five, ensure that the content is correctly parsed and displayed in the template

In your article template (for exampledetail.htmlorarchive.html), when you call the content field written in Markdown (such asContent), you must use|safeA filter to ensure that content is output in HTML format, rather than being escaped as plain text by the browser. At the same time, to ensure that AnQiCMS backend correctly converts Markdown to HTML, you will usually see a call like this:

{% archiveDetail articleContent with name="Content" render=true %}
{{articleContent|safe}}

Here are therender=trueExplicitly indicate that AnQiCMS backend processes Markdown content into HTML,|safeThe filter allows the browser to safely parse and display these HTML tags (including content rendered by MathJax and Mermaid).

Complete these steps and then you can try to create a new document where you can insert some mathematical formulas (such as$$E=mc^2$$) and flowcharts (such asmermaid graph TD; A-->B;Preview your page then.You will be surprised to find that the originally boring text now becomes vivid, and complex mathematical expressions and abstract process logic will be presented clearly and intuitively to the reader.

Common Questions (FAQ)

Q1: Why do the formulas or flowcharts I added to the article still display as plain text even though I have enabled the Markdown editor?A1: Enabling Markdown editor allows you to write content using Markdown syntax, but rendering mathematical formulas (LaTeX) and flowcharts (Mermaid) requires additional JavaScript library support. Please make sure to check yourbase.htmlTemplate file has the script for MathJax and Mermaid.js been correctly introduced according to the guidance in this article.render=trueand|safeEnglish

Q2: Where can I find more about the syntax and usage examples of MathJax or Mermaid.js?A2: MathJax and Mermaid.js both have very detailed and friendly official documents.You can access the official websites of MathJax and Mermaid.js through search engines, where you can find a wealth of syntax examples, configuration options, and troubleshooting guides to help you learn and apply these tools more deeply.

Q3: Can I directly embed HTML code in Markdown articles to display formulas or charts without using MathJax or Mermaid.js?A3: Yes, AnQiCMS's Markdown editor usually supports embedding HTML code directly in Markdown content. As long as your template uses|safeFilter, embedded HTML code will be parsed and displayed by the browser.However, manually writing and maintaining HTML is usually less concise and efficient than the text description method of MathJax or Mermaid.js, especially when frequent modifications or large amounts of content are needed.