How to display mathematical formulas and flowcharts on AnQiCMS web pages?
Today, with the rich content of digitalization, it is often not enough to rely solely on plain text to convey complex information.Especially in fields such as science, technology, and education, mathematical formulas and flowcharts are crucial for expressing rigorous logic and clear steps. 幸运的是，AnQiCMS provides a simple and powerful way for you to easily integrate and display these professional contents on your website. This article will give a detailed introduction on how to use Markdown editor and third-party libraries to perfectly present mathematical formulas and flowcharts on your AnQiCMS website.
Open a new dimension of content display: Enable Markdown editor
The basis for displaying mathematical formulas and flowcharts in AnQiCMS is to enable its powerful Markdown editor.Markdown not only makes your content structure clearer and writing more convenient, but also provides the possibility to integrate these advanced functions later.
To enable the Markdown editor, you need to go to the AnQiCMS backend management interface, find "Global Settings" under "Content Settings".On this page, you will see an option specifically used to switch the editor mode.Select the Markdown editor to enable and save your changes.This step ensures that you can use Markdown syntax to insert formulas and flowcharts when writing articles.
The elegant presentation of mathematical formulas on web pages
Mathematical formulas are an indispensable part of many academic or technical articles.AnQiCMS integrates the widely popular JavaScript display engine MathJax, allowing complex mathematical expressions to be presented clearly and beautifully on your web page.
In order for your website's frontend to 'understand' and 'render' these Markdown-formatted mathematical formulas, we need to include them in the public template file (usuallybase.htmlIn it introduces the CDN resource of MathJax.base.htmlThe file is usually located in the theme directory you are currently using, it carries the general structure of the website, such as header, footer, etc.
Please editbase.htmlFile, in<head>At the closing tag (i.e.),</head>Insert the following code before:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
The purpose of this code is to asynchronously load the MathJax library. Once loaded, it will automatically scan mathematical formulas on the page and render them into beautiful layouts.
Now, you can write mathematical formulas in the Markdown editor. MathJax supports LaTeX syntax, and you can use the following two methods:
- Inline formula: Use a single dollar sign
$Enclosed, for example$E=mc^2$, it will display as(E=mc^2). - Block formula: Use double dollar signs
$$Enclosed, for example$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$, it will be displayed independently on one line and centered: $The integral of e^(-x^2) from 0 to infinity is equal to sqrt(pi)/2$
Make the process logic clear at a glance: display the process diagram
In addition to mathematical formulas, flowcharts are also a powerful tool for expressing complex logic and operational steps.AnQiCMS integrates the Mermaid JavaScript library, allowing you to draw various flowcharts with simple text syntax and display them dynamically on the web.
Similar to MathJax, Mermaid also requires you tobase.htmlinclude its CDN resources in the file. In<head>The closing tag, paste the following code snippet:
<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 will import the Mermaid library in ES module form and throughmermaid.initialize({ startOnLoad: true });Make sure the page is loaded and automatically initialize and render the Mermaid chart.
Now, you can use Mermaid syntax to create flowcharts in the Markdown editor. For example, a simple flowchart can be written as follows:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
它在页面上会渲染成：
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Mermaid supports various chart types, including timeline charts, Gantt charts, and more. You can refer to the official Mermaid documentation to explore more possibilities.
Optimize the display style of Markdown content
To make your Markdown content look more professional and unified on the web page, you can also consider introducing GitHub-style Markdown stylesheets.This will give your code blocks, quotes, lists, and other elements a better visual experience.
Similarly, inbase.htmlthe file<head>Within the tags, you can add the following CDN links:
<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, your Markdown rendering content will obtain a set of clean and readable default styles.
Summary
By following these simple steps, your AnQiCMS website will be able to support the display of mathematical formulas and flowcharts, greatly enriching the form of content expression.From enabling the Markdown editor, to introducing the necessary CDN libraries, and mastering the basic Markdown and chart syntax, the openness and flexibility of AnQiCMS makes these seemingly complex features accessible.Now, you can freely use these tools in technical blogs, tutorial articles, or any page that requires precise expression to enhance the professionalism and readability of the content.
Frequently Asked Questions (FAQ)
1. After following the steps, if the mathematical formula or flowchart still does not display, how should the problem be investigated?
First, make sure you have successfully enabled the Markdown editor in the "Global Settings" -> "Content Settings" of AnQiCMS. Secondly, check carefully.base.htmlIs the CDN code for MathJax and Mermaid correctly and completely pasted in the file<head>Inside the tag.Network issues may also cause CDN resource loading failures. You can try accessing the CDN link directly in the browser, or check the browser console (open with F12) for any related network request errors or JavaScript errors.Finally, please confirm that the Markdown syntax you use in the article is correct, and you can refer to the official documentation of MathJax and Mermaid for verification.
2. Can the style of MathJax rendered mathematical formulas or the color of Mermaid flowcharts be customized?
Of course you can.MathJax and Mermaid both provide rich configuration options, allowing you to customize during initialization.<script>Add a configuration object to label to adjust font, color, etc. For Mermaid,mermaid.initialize()The function can accept a configuration object, such as setting the theme (theme), line color (lineColor), and so on.Moreover, since these libraries ultimately render formulas or charts as HTML and SVG elements, you can also further beautify them by writing custom CSS styles.
3. Does AnQiCMS support integrating other JavaScript libraries for rendering special content in addition to MathJax and Mermaid?
AnQiCMS's Markdown editor is highly flexible in itself, it is responsible for converting Markdown text to HTML. As long as the JavaScript library you want to integrate can recognize specific Markdown extension syntaxes (such as Mermaid's `mermaidBlock) or it can scan and process specific HTML structures on the page using JavaScript, and if the CDN resources of this library can be imported into your website template, then theoretically AnQiCMS can support it.This means you can try to integrate other similar chart libraries (such as ECharts), code highlighting libraries, or any other front-end rendering tools, AnQiCMS's open architecture provides you with a lot of freedom.