How to embed mathematical formulas and flowcharts in content and ensure correct rendering?
In modern web content creation, illustrations are a basic requirement, and for websites in technical, educational, or scientific research fields, mere images and text are often not enough to clearly express complex concepts.At this time, how to flexibly embed mathematical formulas and flowcharts in the content, and ensure that they are rendered correctly and beautifully on the page, has become a focus of content operators.AnQiCMS, with its powerful functions, provides us with an effective way to achieve this goal.
The AnQi CMS built-in Markdown editor greatly facilitates us in writing content with complex structures.It not only supports the syntax features of Markdown, but more importantly, it can seamlessly integrate with third-party rendering libraries through simple configuration, allowing mathematical formulas and flowcharts to be vividly displayed on the front-end page.
Step 1: Turn on the Markdown editor feature
The first step to enable the math formula and flowchart rendering capability in AnQi CMS is to ensure that our content editor supports Markdown format.This setting is very intuitive, just go to the background management interface.
Please log in to the AnQi CMS backend and navigate toGlobal Settingsand then clickContent settings. On this page, you will find a name called “Enable Markdown editorThe options.Please make sure to check this option and save the settings.Turning on the Markdown editor is the foundation for using mathematical formulas and flowcharts, as it allows us to write these special contents using a specific Markdown syntax.
Second step: Introduce the MathJax rendering library
Mathematical formulas are usually written in LaTeX syntax, and browsers themselves cannot directly parse this syntax.To display complex mathematical expressions correctly on the web, we need to use third-party JavaScript libraries like MathJax to render them in real time.
The Anqi CMS template system allows us to flexibly introduce external resources on the page. In the default template structure, there is usually a namedbase.htmlA basic template file named (or similar name), which includes the common header and footer content of the web page. We need to do this in the file<head>Add a line of code in the area to include the MathJax library:
<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, once loaded, it will automatically scan the page content, find, and render mathematical formulas that conform to LaTeX syntax. For example, in a Markdown editor, you can use$$...$$Enclose an independent formula display (such as$$E=mc^2$$), or use$...$Enclose an inline formula (such as爱因斯坦的质能方程是$E=mc^2$)
Third step: Introduce the flowchart rendering library (Mermaid.js)
Similar to mathematical formulas, flowcharts also require specialized libraries to parse and render their concise text descriptions.Mermaid.js is a very popular flowchart drawing tool that allows us to define various charts using simple text syntax, including flowcharts, sequence diagrams, Gantt charts, and so on.
Likewise, in order to make Mermaid.js work on the front-end page, we need to add its script inbase.htmltemplate file<head>the area:
<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 imports the Mermaid library and initializes it, so that it automatically searches and renders charts that conform to the Mermaid syntax when the page is loaded.In the Markdown editor, you can use a specific Mermaid code block to create a flowchart.
```mermaid
graph TD;
A[开始] --> B{决策};
B -- 是 --> C[行动1];
B -- 否 --> D[行动2];
C --> E[结束];
D --> E;
请注意，`mermaid`代码块的开头和结尾需要使用三个反引号（```）标记，并在开头指定语言为`mermaid`。
---
### 第四步：优化Markdown内容显示样式（可选）
虽然上述步骤已经能够正确渲染公式和流程图，但为了让Markdown内容在页面上拥有更好的视觉效果和一致性，您可以选择引入一个预设的Markdown样式表，例如GitHub风格的Markdown CSS。
这同样是在`base.html`模板文件的`<head>`区域内添加一行`link`标签：
```html
<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" />
After introducing this stylesheet, your Markdown content (including plain text, headings, lists, etc.) will be presented to the user in a more professional and readable GitHub style.
Summary of actual operation procedure
- Turn on Markdown editor in the background:Log in to the Anqi CMS backend -> Global settings -> Content settings -> Check 'Enable Markdown editor'.
- Modify the template file:Edit the website template directory under
base.htmlfiles (usually located in/template/{您的模板名称}/base.html) at<head>Inside the tag, add the reference code for MathJax, Mermaid, and GitHub Markdown CSS. - Clear the system cache:After modifying the template file, be sure to click the "Update Cache" button on the Anqi CMS backend to clear the front-end template cache in order to ensure that the changes take effect.
- Write in the content:When writing article or page content, use the Markdown editor and write your mathematical formulas and flowcharts according to the specifications of MathJax (LaTeX syntax) and Mermaid.js (Mermaid syntax).
By following these steps, you can create high-quality content in AnQi CMS that includes rich mathematical formulas and clear flowcharts, greatly enhancing the professionalism and readability of the content.
Frequently Asked Questions (FAQ)
1. I followed the steps, but the mathematical formula or flowchart still does not display, why is that?
- Check the cache:First, please confirm whether you have cleared the system cache on the Anqi CMS backend. The modification of template files requires clearing the cache to take effect on the front end.
- Check the code inclusion location:Ensure MathJax and Mermaid's
<script>The label is placed atbase.htmlthe file<head>Inside the tag. - Check the network connection:These rendering libraries are loaded through CDN, please make sure that your server and visitors can access the CDN address normally
cdn.jsdelivr.netandcdnjs.cloudflare.com) - Check Markdown syntax:Please carefully check the LaTeX and Mermaid syntax you have written in the content for correctness.A small spelling error or incorrect formatting can lead to rendering failure.
- Check browser console:Press F12 to open the browser developer tools, check if there are any JavaScript error messages in the console, this usually helps you locate the problem.
2. Can I download these libraries to my local server if I don't want to use a CDN?Of course you can. You can download the corresponding versions of MathJax and Mermaid.js to your website's static resource directory (such as/public/static/js/)，then modifybase.htmlIntroduce these scriptssrcThe path should point to your local resource path. This can reduce the dependency on external CDNs, but you are responsible for updating and maintaining the library files.
**3. Markdown