As an experienced security CMS website operations person, I fully understand the core role of content quality in user experience and website growth.With the continuous enrichment of content forms, mathematical formulas and complex flowcharts have become important elements to enhance the professionalism and readability of content on technical or educational websites.Anqi CMS in order to meet this need, provides a solution to implement mathematical formulas and flow charts through integration with third-party libraries.

To enable the display of mathematical formulas on the Anqi CMS website, it mainly requires modifying a core template file, that isbase.html. This file usually carries the website's common header (<head>）and tail（<footer>）structure, as well as the global styles and scripts required by the page.By introducing a specific JavaScript library in this file, we can allow the browser to correctly parse and render beautiful mathematical formulas.

The prerequisite for enabling the display of mathematical formulas is that you need to find the "Content Settings" option in the "Global Settings" of the Anqi CMS backend and make sure that the Markdown editor is enabled here.This is because mathematical formulas are usually written in LaTeX or similar Markdown syntax, and Markdown editors can mark these special syntaxes as content areas that require additional processing.

After confirming that the Markdown editor is enabled, you need to open the template directory in use under thebase.htmlFile. According to the conventions of the template design, this file is usually located in/template/{你的模板目录}/the path. Atbase.htmlthe file<head>The area, you need to add a line of JavaScript code specifically for rendering mathematical formulas. Specifically, this line of code will introduce the MathJax library, which is responsible for parsing and displaying mathematical formulas on the client side:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

This script suggests placing in<head>the bottom of the tag, but make sure it loads before any JavaScript code that tries to render formula content.asyncThe attribute makes the script load asynchronously without blocking the parsing and rendering of other content on the page, thereby optimizing the page loading performance.

Although the problem mainly focuses on mathematical formulas, it is worth mentioning that if you also want to display flowcharts in Markdown, you also need to do so in the samebase.htmlMake similar modifications in the file. The flowchart is usually rendered using the Mermaid library. You can do the same after the MathJax script,<head>Area, add the following script code:

<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 imports and initializes the Mermaid library, making it automatically search and render flowcharts defined in Markdown when the page loads.

Moreover, to make the Markdown content on the web more unified and aesthetically pleasing, the document also mentions introducinggithub-markdown-cssStyle sheet. Although this is not a necessary step to display mathematical formulas, you can also use it as part of the website content presentation.base.htmlof<head>Area, add the following CSS link before introducing the MathJax script:

<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" />

Complete these modifications and savebase.htmlAfter the file, refresh your website page. At this time, the mathematical formulas contained in the Markdown editor (such as using$$...$$or$...$syntax) and flowcharts (such as usingmermaidCode blocks will be correctly parsed and displayed.

Common questions

Q1: Do I need to modify the template file for each page that contains a mathematical formula?

You do not need to modify each page separately. Yes.base.htmlThe modification of the file is global. Due tobase.htmlIs the basic template for most pages (such as article detail pages, single pages, etc.), by introducing libraries such as MathJax and Mermaid in this file, these features will be automatically applied to all pages inheriting this basic template, without the need to repeat the operation for each content page.

Q2: If my MathJax formula is not displaying correctly, how should I troubleshoot the issue?

Firstly, make sure you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" on the Anq CMS backend. Secondly, checkbase.htmlIs the path of the MathJax script in the file correct and complete, and is the script tag complete and not accidentally wrapped by other HTML comments.At the same time, confirm that the syntax of your Markdown content's mathematical formulas (such as LaTeX) is in accordance with the standard, MathJax supports many common LaTeX syntaxes by default.Finally, check the console for error messages in the browser developer tools, as this usually provides specific clues about where the problem occurred.

Q3: Can I not use CDN services to include these JavaScript and CSS libraries?

Yes, you can choose not to use CDN services. If you wish to host the files of libraries such as MathJax, Mermaid, etc., on your own server, you can download the latest versions of these libraries from the official channels and then place the files on your website's/public/static/Under the directory (for example, create onemathjaxormermaidsubdirectory), then modifybase.htmlin<script>and<link>label'ssrcorhrefThe property points to the file path hosted locally. The advantage of this is that it reduces dependency on third-party CDNs, but you need to manage the updates of these libraries yourself.