How to enable Markdown editor in AnQiCMS and display mathematical formulas and flow charts correctly?
Creating content on AnQiCMS not only relies on the traditional rich text editor, but the new version also introduces the Markdown editor, providing great convenience for users accustomed to Markdown syntax.Markdown with its concise and efficient features makes content writing more focused and fast.It is even more pleasing that with some simple configuration, we can also elegantly display complex mathematical formulas and intuitive flowcharts on the website.
Next, we will learn in detail how to enable Markdown editor in AnQiCMS and ensure that your mathematical formulas and flowcharts are displayed correctly to visitors.
Enable Markdown editor feature
First, enabling the Markdown editor is the basis for all subsequent operations. This process is very direct, and it only requires simple settings in the AnQiCMS backend.
Enter your AnQiCMS backend management interface, find and click on "Global Settings" in the left navigation bar, and then select "Content Settings".On this page, you will see an option to enable or disable the Markdown editor.Please check the corresponding options to enable Markdown editor.After enabling, when you add or edit documents in the background, you can choose to write content using Markdown syntax.
Get ready to display advanced content: introduce external resources
Although the Markdown editor itself can recognize the syntax of mathematical formulas and flow charts, in order to render them into readable graphics or styles on the web, some front-end libraries are needed.These libraries usually exist in the form of JavaScript and CSS files, and we need to include them in the public template files of the website.
In AnQiCMS, we usually use a file namedbase.htmltemplate file located in/templateIn the directory where you are currently using the template folder, perform these global introduction operations.
1. Beautify the default style of Markdown content
To make Markdown content display better visual effects on web pages, we can introduce a set of universal Markdown style libraries.This usually makes your article look more professional and more readable.
You canbase.htmlthe file<head>Add the following code within the tag to introducegithub-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" />
This code will load a CSS file from a CDN to provide your Markdown content with a default style similar to GitHub, enhancing the reading experience.
2. Correct Display of Mathematical Formulas
For scenarios that require displaying mathematical formulas, such as scientific papers, technical blogs, and so on,MathJaxIt is a very popular solution that can render mathematical formulas in formats such as LaTeX, MathML into high-quality images or text.
Similarly, inbase.htmlthe file<head>Add the following JavaScript code inside the tag to includeMathJaxLibrary:
<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 core script, and once the page content is loaded, it will automatically scan the mathematical formulas on the page and render them.
3. Dynamic display of process diagrams
Process diagrams are an effective tool for expressing complex logic and steps.MermaidIt is a text-based JavaScript library that allows you to define flowcharts, sequence diagrams, and more using simple Markdown-style syntax, and render them into beautiful SVG graphics.
In order to display the Mermaid flowchart on your AnQiCMS website correctly, you need to add the following code insidebase.htmlthe file<head>the tag (or</body>before the closing tag):
<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 loads the Mermaid library using the ES module method, initializes it, and automatically searches and renders the flowchart code when the page is loaded.
Create and display Markdown content in the document
After completing the above configuration, you can freely use Markdown to write content on the document editing page of the AnQiCMS background.
In the content area of the document editor, you can use standard Markdown syntax, including headings, lists, links, images, etc. For mathematical formulas, you can use LaTeX syntax, such as using$$...$$or$...$Enclose the formula. For flowcharts, you can directly embed Mermaid syntax blocks, usually starting with "`mermaidbeginning and end.
For example, a simple mathematical formula might be written like this:$$E=mc^2$$.
A flowchart might be written like this:
graph TD
A[Start] --> B{Decision};
B -- Yes --> C[Perform Action];
C --> D[End];
B -- No --> D;
When you save a document containing Markdown content (especially mathematical formulas and flowcharts), the system core of AnQiCMS will convert these Markdown texts to HTML. It is especially noteworthy that in the template tags of AnQiCMSarchiveDetailIn Chinese, retrieve the document contentContentWhen, if the Markdown editor is enabled, it will automatically convert Markdown to HTML. You can also userender=trueorrender=falseParameters to manually control this conversion to meet special requirements.This means you don't have to worry about content not being parsed, the system will handle the underlying conversion, and the final rendering will be done through the JavaScript library previously introduced.
By following these steps, your AnQiCMS website will be able to fully utilize the powerful features of the Markdown editor, not only making content creation more efficient, but also greatly enhancing the quality and user experience of your content through beautiful formatting, clear mathematical formulas, and dynamic flowcharts.
Frequently Asked Questions (FAQ)
Q1: Why did I enable the Markdown editor and write mathematical formulas and flowcharts in the content, but they were not rendered correctly on the front page and only the original code was displayed?
A1:This is usually because you haven't included the public template file (such asbase.html）Introduce the JavaScript and CSS libraries required for rendering mathematical formulas (such as MathJax) and flowcharts (such as Mermaid). Be sure to follow the steps in the article “Prepare for Advanced Content Display: Introduce External Resources” to add the corresponding CDN links to yourbase.htmlIn the file, make sure that these frontend libraries can be loaded and executed by the browser.
Q2: Can I directly modify the file in the AnQiCMS backend file manager?base.htmlCan I modify the file?
A2:Yes, AnQiCMS provides a convenient template design feature. You can go to the "Template Design" area in the background, find the current template being used, and edit its files online. In/templateUnder the directory, find the template folder you are using and open itbase.htmlModify the file. This method is convenient and fast, but please make sure to back up before making any changes to avoid unnecessary errors.
Q3: In addition tobase.htmladding CDN links, can I add this code in other document or category independent template files?
A3:In theory, it is possible. If a specific document or category page needs to display mathematical formulas or flowcharts, and other pages do not need to, you can use an independent template file for the document or category (for examplearticle_detail.htmlorcategory_list.htmlThese CDN links are introduced separately. However,base.htmlIt is the basic template shared by all pages, placing these common resources inbase.htmlThis is the most common, convenient, and manageable approach, which can avoid repetition and omission.