How to enable Markdown editor and support mathematical formulas/process diagrams in AnQiCMS?
As an experienced website operator familiar with AnQiCMS, I know that high-quality, multimedia content is the core to attract and retain users.In daily content publishing work, we often need to write technical articles, tutorials, or reports containing complex information.In order to better meet the needs of content creation and provide a better reading experience, AnQiCMS specially supports the Markdown editor, and can render mathematical formulas and flowcharts through simple configuration.This can greatly enhance the readability and professionalism of our content.
Next, I will guide you in enabling Markdown editor in AnQiCMS and configuring support for mathematical formulas and flowcharts.
Enable AnQiCMS Markdown Editor
First, you need to log in to the AnQiCMS backend management interface.In the backend homepage, you will find the 'Global Settings' option in the left navigation bar.Click to enter and select the 'Content Settings' item.Here, you will see an option named "Enable Markdown Editor".Check this option and save your changes.
After completing this step, when you create or edit a document, the content editing area will default to Markdown mode. This means you can use Markdown's concise syntax to quickly format content, such as using#Create a title,**Bold text,-Create lists, etc.
Apply Markdown default styles to optimize reading experience
Markdown syntax itself focuses on content structure rather than defining styles directly.To make the content rendered by Markdown have a good visual effect on the front-end page, we usually introduce a set of CSS style libraries.GitHub Markdown CSS is a widely popular choice, providing a set of elegant and readable default styles.
To apply this style, you need to edit the AnQiCMS template file in thebase.html. It is usually located in the root directory of your current topic. Find<head>Part of the tag, and add the following line of code to it:
<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 line of code will use Cloudflare's CDN service to introduce the GitHub Markdown stylesheet, ensuring that your Markdown content is displayed clearly and professionally on the front-end page.
Display mathematical formulas correctly on the web
For writing articles containing mathematical formulas, such as in physics, statistics, or engineering fields, AnQiCMS can perfectly support it with third-party libraries.We will use the powerful JavaScript display engine MathJax to render LaTeX, MathML, or AsciiMath formatted mathematical formulas.
Similarly, you need to editbase.htmlthe file. In<head>At the end of the tag (usually after you have added the Markdown stylesheet), add the following script:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
This script will asynchronously load MathJax and automatically detect and render mathematical formulas in the page content after the page content is loaded. For example, you can write LaTeX formulas like this in Markdown content:$$E=mc^2$$(Independent formula) or$a^2 + b^2 = c^2$(Inline formula), MathJax will render it into beautiful mathematical symbols.
Display the flow chart correctly on the web page
Flowcharts are a visual way to understand complex systems and workflows.AnQiCMS integrates the Mermaid.js library, making it possible to create and render flowcharts directly in Markdown.
You need to add the following script code inside thebase.htmlthe file<head>tag to enable the flowchart function.
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
This script will load Mermaid.js from jsdelivr CDN and initialize its features.After configuration is complete, you can use the specific Mermaid syntax in Markdown content to create flowcharts, sequence diagrams, Gantt charts, and so on.
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Mermaid.js will parse this text and draw the corresponding graphics on the page.
Summary
By following these simple configuration steps, your AnQiCMS site can not only significantly improve content creation efficiency with the Markdown editor, but also elegantly display complex mathematical formulas and clear flowcharts.This will bring a richer, more professional reading experience to your readers, and also make your content stand out among many websites.As operations personnel, we always strive to provide **content presentation to users, and these enhanced features are undoubtedly important tools to achieve this goal.
Frequently Asked Questions
Why did I configure according to the steps, but the mathematical formula or flow chart still does not display correctly?
Firstly, please check carefully.base.htmlDoes the CDN script included in the file complete and is the position correct, it is usually recommended to place<head>The end of the label.Secondly, ensure that you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" of the AnQiCMS backend.Finally, please check if your network connection can access the CDN resources of MathJax and Mermaid.js normally, network issues may also cause resource loading to fail.You can try clearing your browser cache or check the console for loading error messages in the browser's developer tools (F12)
Can I use other Markdown styles or libraries for rendering math formulas/process diagrams?
Of course you can.The AnQiCMS template system is very flexible.base.htmlLink to the corresponding CDN and initialization script can be obtained.It is crucial that the library you replace can parse the syntax you use in Markdown and provide front-end rendering capabilities.Make sure to test the newly introduced library for compatibility with the existing features of AnQiCMS.
Will adding so many third-party CDN resources affect the website's loading speed?
We recommend using Cloudflare and jsdelivr, which are leading CDN service providers globally with extensive node distribution, ensuring quick loading of resources worldwide.Although introducing additional scripts and style sheets may increase the initial loading requests of the page, these resources are usually cached by the browser, resulting in significantly faster subsequent access speeds.If you have very high performance requirements, you can consider downloading these JS and CSS files to your local server and performing appropriate merging and compression, but this will increase maintenance costs.For most small and medium-sized enterprises and content operators, using a CDN directly is the preferred solution that balances ease of use and performance.