As a website operator deeply engaged with Anqi CMS, I am well aware of the importance of being able to flexibly use various editing tools in content creation.Markdown editor is favored by content creators for its concise and efficient features.When your content involves technology, science, or complex concepts, correctly displaying mathematical formulas and flowcharts is crucial for enhancing the quality of content and attracting professional readers.Next, I will give a detailed introduction on how to enable the Markdown editor in AnQiCMS and ensure that mathematical formulas and flowcharts can be presented correctly.
Turn on the Markdown editor in AnQiCMS
AnQiCMS provides a variety of editing experiences for content creators, and the Markdown editor is one of the powerful options.To enable it, you need to first log in to your AnQiCMS management backend.
Log in to the backend, then find the "Backend Settings" option in the left navigation menu.Click to expand and select 'Content Settings'.In the content settings page, you will see an option to switch the editor type.Here, please check or enable the Markdown editor.After making your selection, be sure to click the "Save" button at the bottom of the page to ensure your settings take effect.Once enabled, you can choose to use Markdown syntax to write content when creating or editing documents.
Default style for displaying Markdown content correctly
To ensure that your Markdown content has good readability and consistent visual effects on the front-end page, it is recommended to introduce a standard Markdown stylesheet.This usually makes the title, list, code block, and other elements have clear and professional formatting.
You can achieve this by linking an external CSS file to your website template. Specifically, you need to find in the template file you are currently using.base.html（or a similar public header template file），then<head>Add the following line of code inside the tag:
<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 introduces GitHub-style Markdown CSS, which can bring a concise and modern Markdown content display effect to your website.Please note that modifying template files requires certain technical knowledge, and it is recommended to back up related files before operation.
Ensure the correct rendering of mathematical formulas
For content that needs to display mathematical formulas, AnQiCMS can achieve this by combining with the Markdown editor.This depends on third-party JavaScript libraries, such as MathJax.MathJax is a powerful cross-browser JavaScript rendering engine for displaying mathematical formulas in web browsers.
To enable the correct display of mathematical formulas on your AnQiCMS website, you also need to configure it in the template file. Open your website'sbase.htmlfile, and<head>Label inside (it is best to do this after loading GitHub Markdown CSS to ensure rendering order) add the following script reference:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
After adding this script, when you use LaTeX or AsciiMath syntax to write mathematical formulas in Markdown content, MathJax will automatically parse and render them, presenting them on the page with high-quality formatting.
Display the flowchart in the web page
Flowcharts are an effective way to visualize processes and logic, and Markdown editors can also support them.To make the flowchart display normally on the AnQiCMS website, we need to integrate the Mermaid.js library.Mermaid.js is an English-based chart and flowchart tool, which allows you to create various charts using text and code.
Similar to mathematical formulas, you need to add it to thebase.htmltemplate file where Mermaid.js is introduced. Similarly in<head>the tag, add the following code inside:
<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 Mermaid.js via CDN and initializes it to automatically render flowcharts in Markdown content when the page is loaded (usually using "`mermaidEnglish block）。Now, you can use Mermaid syntax to create and display flowcharts in Markdown.
Frequently Asked Questions
Q1: I have followed the steps inbase.htmlI have added code, but mathematical formulas or flowcharts still cannot be displayed, what should I do?
A1:Firstly, please make sure that the Markdown editor is enabled in the 'Content Settings' of the AnQiCMS backend.其次，please check whether the syntax of the formulas and flowcharts you write in the Markdown document is correct.$$...$$or$...$), and the flowchart needs to bemermaid ...
Q2: Can I directly modify the template editing function in the AnQiCMS background?base.htmlCan I modify the file?
A2:Can be.AnQiCMS provides a powerful backend template editing feature, you can find the 'Template Editing' option under the 'Template Design' menu.Here, you can directly modify the template code.However, editing templates in the background requires careful handling, any syntax error can cause the website to be inaccessible.It is strongly recommended that you back up the current template file before making any modifications.
Q3: Will introducing these CDN resources affect the loading speed of my website?
A3:Any external resource inclusion may affect the website loading speed, but for CDN (Content Delivery Network), its design purpose is to optimize content distribution speed.MathJax and Mermaid.js are commonly used libraries, which are hosted on large CDNs such as Cloudflare and jsDelivr, and usually have fast loading speeds and high availability.asyncProperties, this means it will be loaded asynchronously and will not block the DOM parsing of the page.Mermaid.js is also loaded on demand.Therefore, for most websites, this impact is usually acceptable, and the improvement in user experience brought by high-quality content display is often greater than the potential minor increase in loading time.