How does AnQiCMS ensure that mathematical formulas and flowcharts inserted in the Markdown editor are displayed normally on the front end?
In modern website content creation, Markdown is favored by content creators for its concise and efficient features.However, for websites that need to present complex information, such as mathematical formulas and flowcharts, how to seamlessly insert them into Markdown editors and ensure they display normally on the front end is often a challenge for content operators.AnQiCMS (AnQiCMS) fully understands this need, through flexible configuration and standardized introduction methods, allowing these complex elements to be elegantly presented on your website.
Ensure that the mathematical formulas and flowcharts you insert in the AnQiCMS Markdown editor are displayed normally on the front end, which mainly involves two core steps: first, enabling the Markdown editor feature of the system, and second, introducing the necessary third-party rendering libraries in the front-end template.
Enable the system built-in Markdown editor
AnQiCMS provides a powerful Markdown editor, you need to make simple settings in the background to use it.This step is fundamental, it ensures that you can use Markdown syntax while editing content, including specific tags for mathematical formulas and flowcharts.
You just need to log in to the AnQiCMS backend management interface, navigate to the "Global Settings", and then click the "Content Settings" option.Here, you will find an option to enable the 'Markdown Editor'.Check this option and save the settings, and you can use the Markdown editor when creating or editing documents.After enabling, the system will recognize Markdown syntax when you save content, but to present these complex mathematical formulas and flowcharts in a visual form to visitors, front-end templates are also needed.
Configure the front-end template to support advanced rendering
After converting Markdown content to HTML, the native browser cannot directly understand and render mathematical formulas (such as LaTeX syntax) or flowcharts (such as Mermaid syntax).Therefore, we need to use a dedicated JavaScript library to complete this rendering.AnQiCMS uses a mature industry solution and provides clear integration guidance.All front-end resources should be included in your website template'sbase.htmlthe file<head>Partly proceed, so that they can be available on all pages.
1. Optimize the display style of Markdown content
It is recommended to introduce to make the converted Markdown content more readable and aesthetically pleasinggithub-markdown-cssThis CSS library can render your Markdown content in a concise GitHub style, making code blocks, lists, quotes, and other elements look more professional.
Before yourbase.htmlthe file<head>Add the following code within the tag:
<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" />
In this way, your Markdown content will display with a unified and beautiful style.
2. Implement elegant rendering of mathematical formulas
For rendering mathematical formulas, AnQiCMS recommends using MathJax.MathJax is a powerful JavaScript display engine that can display mathematical symbols represented in LaTeX, MathML, or AsciiMath.It can display complex mathematical expressions in high quality on the web.
It is also inbase.htmlthe file<head>Add the following script reference inside the tag:
<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 and automatically scan and render all mathematical formulas that match the MathJax syntax. For example, you can write formulas like this in Markdown:$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$It will be rendered into a clear mathematical expression by MathJax.
3. Dynamic display of flowchart
The rendering of flowcharts can rely on the Mermaid library.Mermaid allows you to use simple text and code to define various charts, including flowcharts, sequence diagrams, Gantt charts, and more, and then dynamically render them into SVG graphics.This is an extremely convenient feature for documents that need to visually present business processes or system architectures.
Please add the following code tobase.htmlthe file<head>Inside 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 loads the Mermaid library via the ES module and initializes it when the page loads.startOnLoad: trueThe parameter tells Mermaid to automatically find and render all chart definitions after the page is loaded. You can define a simple flowchart in Markdown like this:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
`
By following these three simple steps, your AnQiCMS website will be able to perfectly support the insertion of mathematical formulas and flowcharts in Markdown, greatly enriching the expression form and professionalism of the content.
Content writing and publication
Once these configurations are completed, you can freely create documents containing mathematical formulas and flowcharts using the Markdown editor in the AnQiCMS background.When editing, enter content according to the syntax specifications of MathJax and Mermaid respectively.AnQiCMS after saving the content, will parse and store it.The current page is passedarchiveDetailTags (especially forContentThe field) when rendering content, the JavaScript library that has been introduced will automatically intervene and convert the text formula and chart definition into exquisite visual elements.
In summary, AnQiCMS makes it easily accessible to render complex mathematical formulas and flowcharts by providing flexible backend configuration and standardized frontend introduction.With just a few simple steps, your website content can leap off the page and present itself in a richer, more professional manner to visitors.
Frequently Asked Questions (FAQ)
1. Why did I follow the steps, but the mathematical formula or flow chart still cannot be displayed?When encountering this situation, please check the following points first:
- Is the Markdown editor enabled:Make sure the Markdown editor feature is checked and saved in the "Global Settings" -> "Content Settings" of the AnQiCMS backend.
- Is the front-end CDN resource accessible:Check your network environment and confirm
cdnjs.cloudflare.comandcdn.jsdelivr.netThese two CDN services can be accessed normally. Sometimes network restrictions can cause resource loading to fail. base.htmlIs the file modified correctly:Please check carefully where you arebase.htmladded to the filelinkandscriptTags, make sure the code has no spelling errors, and is located<head>Inside the tag.- Browser Caching:After front-end modifications, the browser may load old cached files. Please try clearing the browser cache or access the page in incognito mode.
2. Besides mathematical formulas and flowcharts, what advanced features does AnQiCMS's Markdown editor support?AnQiCMS's Markdown editor supports the core features of Markdown syntax, such as:
- Title:
#to###### - List:Ordered list (
1.) and unordered list (-or*) - code block: Code enclosed in three backticks (`) supports syntax highlighting.
- Table:Simple Markdown table syntax.
- Links and images:
[文本](链接)And the “ - Citation:
>symbol. Combinedgithub-markdown-cssThese elements will be enhanced in their display.
3. Can I customize the display style of these formulas and flowcharts?Yes, you can usually customize their display styles.
- Markdown overall style:You can modify or override:
github-markdown-cssThe CSS rules to adjust the display effects of most Markdown elements.Because it is an external CSS file, you can introduce your own custom CSS file and use the CSS cascade to override the default styles. - Mathematical formula (MathJax):MathJax provides a rich set of configuration options, you can configure it through JavaScript code after loading the MathJax script, such as adjusting fonts, colors, rendering modes, etc.The specific configuration method can be referred to in the official MathJax documentation.
- Flowchart (Mermaid):Mermaid also supports configuring themes, colors, fonts, and more through JavaScript. In
mermaid.initialize()In the method, you can pass more configuration parameters to customize the visual effects of the flowchart. For details, it is also recommended to consult the official Mermaid documentation.