In content creation, especially in technical articles, academic papers, or project documents, we often need to display complex mathematical formulas and clear flowcharts to enhance the professionalism and readability of the content.For the users of AnQiCMS, this is indeed a very practical need.Then, does the Anqi CMS support displaying mathematical formulas and flowcharts in article content?The answer is affirmative, and it is not complex to implement.
Auto CMS provides flexible and diverse content management methods for content creators, one of which is the built-in Markdown editor.Markdown itself provides a concise text markup language, which can be used to write mathematical formulas (usually LaTeX syntax) and flowcharts (usually Mermaid syntax).However, Markdown only provides the syntax for writing these special contents, and to render them beautifully on the web, support from a front-end rendering library is required.Auto CMS cleverly utilizes this point, presenting mathematical formulas and flowcharts perfectly by introducing these rendering libraries.
Enable Markdown Editor
Firstly, make sure that your security CMS backend has enabled the Markdown editor. This is the basis for displaying mathematical formulas and flowcharts. You canBackground -> Global Settings -> Content SettingsFind and check the option to enable Markdown editor. Once enabled, you can use Markdown syntax to write content in the article editing interface.
Render mathematical formulas
Markdown mathematical formulas written in, for example, inline formulas using LaTeX syntax$E=mc^2$or block formulas$$ \int_a^b f(x) dx $$, requires a dedicated JavaScript library to convert it into visible graphics. MathJax, commonly used in the industry, is such a powerful tool.
In order for the Safe CMS website to correctly render mathematical formulas, we need to include a common template file on the website (usually)base.html) of<head>Tags within the array should include MathJax references. This is usually done through a CDN service to ensure fast loading and stability. You just need to add the following code snippet tobase.htmlIn:
<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 library, allowing it to process mathematical formulas on the page without blocking the rendering of the page.
Display flowchart
Similar to mathematical formulas, flowcharts also need a frontend library to convert their text descriptions into graphics.Mermaid.js is one of the most popular choices, allowing you to define flowcharts, sequence diagrams, Gantt charts, and more with simple text syntax.
To display a flowchart in Safe CMS, you also need tobase.htmlthe file<head>add the reference and initialization code of Mermaid.js in 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 introduces the Mermaid library in the form of a module and initializes it automatically after the page is loaded, thus rendering the Mermaid flowchart code block in the page.
Optimize Display Style
Although MathJax and Mermaid can correctly render formulas and flowcharts, in order to make them and the entire Markdown content more visually appealing and uniform, we can introduce a set of universal Markdown CSS styles.For example, GitHub's Markdown style is very popular.
You can inbase.htmlof<head>Add the following link inside the tag, before other stylesheets, to introduce GitHub Markdown CSS:
<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, your Markdown content will have better formatting and visual effects when displayed.
points to note in actual operations
All these configurations require you to make a one-time modification to the template file. The template files of Anqi CMS are usually located under the root directory of the project./templatefolder.base.htmlIt is one of the common general layout files.base.htmlThe modification will affect all pages inheriting this layout.These frontend libraries are loaded via CDN (Content Delivery Network), which not only relieves the burden on your server but also accelerates the loading speed during user access.
After completing these configurations, you can freely write mathematical formulas and flowcharts in the article content of AnQi CMS using Markdown syntax. For example, insert into the article:
这是一个行内公式：$a^2 + b^2 = c^2$
$$
\begin{aligned}
\dot{x} &= \sigma(y - x) \\
\dot{y} &= \rho x - y - xz \\
\dot{z} &= -\beta z + xy
\end{aligned}
$$
```mermaid
graph TD
A[开始] --> B{条件判断?};
B -- 是 --> C[执行操作1];
B -- 否 --> D[执行操作2];
C --> E[结束];
D --> E;
The strength of Anqi CMS lies in its customizability and scalability, which can greatly enrich the expression of content through the simple introduction of a frontend library.
Common Questions (FAQ)
问：我是否需要安装额外的安全CMS插件来支持数学公式和流程图的显示？
问：我应该把这些JavaScript和CSS引用代码添加到模板文件的哪个位置？答：Suggest to use MathJax and Mermaid.js's
<script>tags as well as GitHub Markdown CSS's<link>Labels are placed in your website's general template file (for examplebase.html) of<head>within the tags. This ensures that these libraries are parsed before the page content is loaded, allowing the page content to be rendered correctly.问：If I do not enable the Markdown editor in the Security CMS backend, will the formulas and flowcharts in the articles still display normally?答：Can't.Enable Markdown editor is the basis for parsing these special syntaxes.If not enabled, the system will treat your formula and flowchart code as plain text, even if a rendering library is introduced at the front end, it will not be able to recognize and convert it into graphics.