How to correctly display mathematical formulas and flowcharts in Markdown content?
With the popularity of the built-in Markdown editor of AnQiCMS, many users hope to be able to display information more flexibly in their website content, especially for technical documents, tutorials, or data analysis content, the presentation of mathematical formulas and flowcharts has become particularly important.AnQiCMS integrates external libraries to bring powerful extension capabilities to Markdown content, making it easy and convenient to display professional content.
Make sure that mathematical formulas and flowcharts in the Markdown content are displayed correctly, the first thing you need to do is complete a basic setting, which is to enable the Markdown editor in the AnQiCMS background.This option is usually found under "Global Settings" -> "Content Settings".After enabling, the system will begin to parse and render Markdown syntax.
After the Markdown content is parsed into HTML, in order to have a unified and beautiful style on the page, a universal Markdown CSS style library can be introduced.Generally, we would choose a widely popular and high-performance CDN service to load these resources.base.htmlof<head>Add the following code to the region to introduce GitHub-style Markdown formatting:
<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 way, Markdown text content will be presented in a clear and easy-to-read format in the browser.
Correctly displays mathematical formulas
Markdown itself does not directly support complex mathematical formula typesetting, but we can use powerful third-party JavaScript libraries to solve this problem.MathJax is a widely used solution that can render mathematical expressions written in LaTeX, MathML, or AsciiMath into high-quality formats that can be displayed on web pages.
To enable MathJax to display mathematical formulas in AnQiCMS, you need to modify the website template file (it is also recommended to do so inbase.htmlof<head>In the region) add the MathJax script reference. Usually, choose a reliable CDN service (such as jsdelivr) to load to ensure speed and stability:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
This script will asynchronously load and process mathematical formulas on the page.Content creators can use standard LaTeX syntax when writing mathematical formulas in Markdown documents.$Enclosed, such as$E=mc^2$Block-level formulas use;$$Enclosed, such as:
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$
After publishing the content, the MathJax script will automatically recognize and render these LaTeX formulas when the page is loaded.
Draw and display a flowchart
Besides mathematical formulas, flowcharts are also an indispensable part of technical documents.Markdown natively does not support flowcharts, but we can implement this feature by integrating the Mermaid.js library.Mermaid allows users to generate various charts through simple text descriptions, including flowcharts, sequence diagrams, Gantt charts, and so on.
To make Mermaid work normally in AnQiCMS, it also needs to be introduced into the website template file (such asbase.htmlof<head>In the region. Similar to MathJax, Mermaid also recommends loading through CDN, and requires an additional initialization script to ensure that it can automatically scan and render charts after the page is loaded:
<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 first imports the Mermaid library in module mode, then callsmermaid.initialize()the method, and setsstartOnLoad: trueso that it automatically finds and renders Mermaid charts when the page is loaded.
When creating a flowchart in Markdown content, you can use the specific syntax of Mermaid. The chart content needs to be enclosed by amermaid `开始和以`The code block wraps up. For example, a simple flowchart can be written like this:
```mermaid
graph TD
A[开始] --> B{操作};
B --> C{条件判断?};
C -- 是 --> D[执行任务];
C -- 否 --> E[结束];
D --> E;
`
After publishing, the Mermaid script on the page will recognize this text and render it as an interactive flowchart.
Content publishing and **practice
Add the above script to your AnQiCMS template file (usuallybase.html）的<head>After that, you can freely write content in the Markdown editor on the back end that includes mathematical formulas and flowcharts.Make sure the Markdown syntax you use is consistent with MathJax (LaTeX) and Mermaid (chart definition) syntax.
The introduction of these external scripts, although it greatly enhances the expressiveness of the content, also needs to be aware of its possible slight impact on page loading speed.Considering the optimization of CDN services, this impact is usually within an acceptable range.It is recommended to verify in the test environment and ensure that the structure of your template files is clear for future maintenance and management of these external resources.
Frequently Asked Questions (FAQ)
1. Why are formulas, flowcharts, and scripts still displayed as plain text in my Markdown editor?
This usually has several reasons.First, make sure you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" of AnQiCMS.If not enabled, the system may not parse your Markdown content into HTML.<head>Tags within, and no grammatical errors.The browser developer tools console can help you check if there are any failed or error script load messages.$or$$Correctly enclosed, is the Mermaid chart within the `mermaidcode block.
2. Can I use other libraries to render formulas or charts besides MathJax and Mermaid?
The AnQiCMS Markdown editor is mainly responsible for converting Markdown text to HTML.For formula and chart rendering, AnQiCMS itself does not impose any restrictions, as long as you can find other libraries compatible with HTML and capable of rendering in the client-side via JavaScript, and can integrate the scripts correctly into your website template like MathJax and Mermaid, it is theoretically feasible.<script>the tag.
3. Will adding these additional JavaScript libraries affect the loading speed of my website?
Yes, any additional resource loading may have an impact on the website's loading speed.However, MathJax and Mermaid are mature and widely used libraries, typically loaded through CDN (Content Delivery Network), which means they will be transferred from the server closest to the user, and browsers will usually cache these commonly used libraries to reduce the time for repeated loading.async(Asynchronous) loading, which means it will not block the rendering of page content. For Mermaid,startOnLoad: trueEnsure that it starts rendering the chart only after the page content structure is ready, minimizing the impact on the initial loading speed.You can offset these minor effects by optimizing images, compressing other static resources, and other methods to maintain the good performance of the website.