How to enable Markdown editor in Anqi CMS and display mathematical formulas and flowcharts correctly?
As a deep user of Anqie CMS website operators, I know the importance of being able to flexibly use various editing tools in content creation.The Markdown editor is increasingly 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 improving the quality of the content and attracting professional readers.I will introduce how to enable the Markdown editor in AnQiCMS and ensure that mathematical formulas and flow charts are presented correctly.
Enable 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 log in to your AnQiCMS admin panel first.
After logging in, please find the "Background Settings" option in the left navigation menu.Click to expand and select "Content Settings". On the Content Settings page, you will see an option to switch between editor types.Here, please check or enable Markdown editor.After making your selection, please click the "Save" button at the bottom of the page to ensure your settings take effect.Once enabled, you can choose to write content in Markdown syntax when creating or editing documents.
Display default style of 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 titles, lists, code blocks, and other elements present a clear and professional layout.
You can achieve this by linking an external CSS file to your website template. The specific operation is to find it 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 the template file 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 be implemented in combination with the Markdown editor.This depends on third-party JavaScript libraries such as MathJax.MathJax is a powerful cross-browser JavaScript display engine used to render mathematical formulas in web browsers.
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.htmlthe file, and<head>Inside the tag (it is best to add the following script reference after loading the GitHub Markdown CSS to ensure rendering order):
<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 typesetting.
Display process diagrams on the web
Flowcharts are an effective way to visualize processes and logic, 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 a chart and flowchart tool based on JavaScript, which allows you to create various charts using text and code.
Similar to mathematical formulas, you need to add it to the websitebase.htmlIn the template file, introduce Mermaid.js. Similarly in<head>Add the following code inside the 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 Mermaid.js via CDN, initializes it to automatically render flowcharts in Markdown content when the page loads (usually using "`mermaidcode block). Now, you can use Mermaid syntax in Markdown to create and display flowcharts.
After completing the above configuration, you can fully utilize the AnQiCMS Markdown editor feature, combine it with MathJax and Mermaid.js, and publish high-quality content with beautiful formatting, clear mathematical formulas, and intuitive flowcharts, thereby better serving your readers and enhancing user experience.
Frequently Asked Questions
Q1: I have followed the steps already inbase.htmlHow do I add code, but the mathematical formulas or flow charts still cannot be displayed?
A1:First, make sure you have enabled the Markdown editor in the "Content Settings" of the AnQiCMS backend.Next, please check whether the syntax of the formulas and flowcharts you have written in the Markdown document is correct.Mathematical formulas usually require specific delimiters (such as$$...$$or$...$), while the flow chart needs to bemermaid ...Please clear the browser cache and AnQiCMS system cache. Sometimes, old cache files can hinder the loading of new features.If the problem persists, please check the browser console for any JavaScript errors, which may help you locate the issue.
Q2: Can I directly modify the template editing feature in the AnQiCMS backend?base.htmlCan I modify the file?
A2:Can be. AnQiCMS provides powerful background template editing features, you can find the 'Template Editing' option under the 'Template Design' menu.Here, you can directly modify the template code. However, editing the template in the background requires careful operation, any syntax error can cause the website to fail to access normally.It is strongly recommended to backup the current template file before making any modifications.
Q3: Will introducing these CDN resources affect the loading speed of my website?
A3:The introduction of any external resources may have an impact on the loading speed of a website, but for CDN (Content Delivery Network), its design purpose is to optimize the speed of content distribution.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.The MathJax script was usedasyncA property, which means it will be loaded asynchronously, without blocking the page's DOM parsing.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 increase in loading time.