How to enable Markdown editor in AnQiCMS and ensure that mathematical formulas and flowcharts are displayed correctly on the webpage?
AnQiCMS provides flexible and diverse editing experiences for content creators, and the introduction of the Markdown editor has made it even more convenient for many users familiar with this concise markup language.However, enabling Markdown editor is not enough for content that requires special rendering, such as mathematical formulas and flowcharts.This article will guide you in detail on how to enable Markdown editor in AnQiCMS and ensure that your web page can correctly and beautifully display complex mathematical formulas and flowcharts.
First, enable the AnQiCMS Markdown editor
Enabling Markdown editor in the AnQiCMS backend is a simple process that will change the default way you create and edit article content, allowing you to enjoy the efficiency and convenience of Markdown.
First, please log in to your AnQiCMS admin interface. In the left navigation menu, find and click on theBackend settingsSelect thenContent settings. On 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 write content when creating or editing documents.
Second, integrate third-party libraries to ensure that mathematical formulas are rendered correctly
The Markdown syntax itself is concise and efficient, but it does not have native rendering capabilities for complex mathematical formulas.To display mathematical formulas written in LaTeX syntax beautifully on the web page, we need to rely on a powerful third-party JavaScript library - MathJax.
To integrate MathJax, you need to modify your template file. In AnQiCMS,base.htmlThe file is typically the basic framework of all pages, and adding code here can ensure that all pages have MathJax rendering capabilities.
Please go through the "Template Design" feature in the background, or directly access the server files via FTP/SSH to find the template directory you are currently using underbase.htmlthe file. Then, in<head>The internal label, 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 (such as, using$$...$$or$...$Enclose the LaTeX syntax and convert it into clear, professional mathematical typesetting, ensuring that the formula displays correctly and beautifully on any device.
Introducing a flowchart library to make charts vivid and intuitive
Similar to mathematical formulas, standard Markdown cannot directly render complex flowcharts.At this point, we can take advantage of the powerful JavaScript library, Mermaid.js, which can convert text-based flowchart descriptions into beautiful vector graphics.
Similarly, you need tobase.htmlthe file<head>Add the Mermaid.js inclusion code within the tag. Please add the following content immediately 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 to automatically find and render flowcharts written in Mermaid syntax when the page loads. You just need to use the specific syntax of Mermaid in Markdown content (such as, usingmermaid ...Blocks to describe your flowchart, they will be displayed in a graphical form on the web.
IV. Optimize the default style of Markdown content (optional)
Although MathJax and Mermaid.js have solved the rendering issues for formulas and flowcharts, you may still want your Markdown content to be more visually coordinated and unified.At this point, you can consider introducing a generic Markdown stylesheet, such asgithub-markdown-css.
Similarly, inbase.htmlthe file<head>Inside the tag, 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 a comfortable reading experience similar to GitHub.
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 Markdown content field (such asContentPlease use this when}|safeA filter to ensure that the content is output in HTML format, rather than being escaped as plain text by the browser. At the same time, to ensure that the AnQiCMS backend correctly converts Markdown to HTML, you will usually see a call like this:
{% archiveDetail articleContent with name="Content" render=true %}
{{articleContent|safe}}
Hererender=trueExplicitly indicate that the AnQiCMS backend will process Markdown content into HTML and|safeThe filter allows the browser to safely parse and display these HTML tags (including MathJax and Mermaid rendered content).
After completing these steps, you can try to create a new document and insert some mathematical formulas (such as$$E=mc^2$$) and flowcharts (such asmermaid graph TD; A-->B;)， then preview your page. 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.
Frequently Asked Questions (FAQ)
Q1: Why did I enable the Markdown editor and add formulas or flowcharts to the article, but they still display as plain text?A1: Enabling the 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.htmlDid the template file correctly introduce the MathJax and Mermaid.js scripts as instructed in this article.At the same time, ensure that your content field is used in the templaterender=trueand|safefilter for output.
Q2: Where can I find more grammar and usage examples for 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 a search engine, 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: Do 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 into Markdown content. As long as your template uses|safeThe filter, embedded HTML code will be parsed and displayed by the browser.However, manually writing and maintaining HTML is usually not as concise and efficient as the text description methods of MathJax or Mermaid.js, especially when frequent modifications or large amounts of content are needed.