How to correctly display Markdown formatted mathematical formulas and flowcharts in AnQiCMS content?
For many content creators, especially when it comes to technical articles, tutorials, or data reports, how to clearly and accurately display mathematical formulas and complex flowcharts on web pages has always been a challenge.The traditional HTML editing method is not only cumbersome but also prone to errors.luckyly, the new version of AnQiCMS introduces support for Markdown editors, which brings great convenience in handling such complex content.It makes the creation of technical content more efficient and elegant.
Enable Markdown Editor: The First Step of Content Creation
To enjoy the convenience of Markdown in AnQiCMS, you first need to make sure that your website has enabled the Markdown editor.This only requires simple settings to be done in the background.
You can go to the AnQiCMS backend and findGlobal Settingsand then click to enterContent settings.On this page, you will see an option to enable Markdown editor.Check and save, and your document content editor will switch from rich text mode to Markdown mode.In this way, when you write articles, product descriptions, single-page content, or even category introductions, you can organize content with a simpler Markdown syntax, including the mathematical formulas and flowcharts we are discussing today.
Introduce the necessary support libraries: Make formulas and flowcharts 'alive'
Markdown itself provides a concise markup language, but in order to display complex mathematical formulas and graphical flowcharts correctly in the browser, we still need to rely on some additional "translators".These translators are typically JavaScript libraries that parse specific Markdown syntax when the page loads and render it into the visual effects we expect.
The AnQiCMS template system is very flexible, allowing us to easily introduce these necessary libraries in the common header template file of the website (usuallybase.html). If you are not clearbase.htmlThe specific location, which is generally located in the root directory of the template folder you are using, or in a common segment directory (such aspartial/).
First, in order to make the content rendered by Markdown have a neat and readable style, especially for elements such as code blocks and citations, we can introduce GitHub-style Markdown CSS. You just need to add the following line of code tobase.htmlthe file<head>Inside 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" />
The presentation of mathematical formulas is next.If you need to insert complex mathematical expressions into an article, MathJax is a very powerful tool that can render mathematical formulas in LaTeX, MathML, or AsciiMath formats into high-quality images or text.base.htmlthe file<head>Inside the tag:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
The last step is to draw the flowchart.Flowcharts can be implemented using the Mermaid library.Mermaid allows you to define flowcharts, sequence diagrams, and more using simple text syntax and render them into beautiful graphics.base.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>
After adding this code, savebase.htmlthe file and clear the AnQiCMS cache (via the "Update Cache" feature in the background) to ensure that the new configuration takes effect.
Write formulas and flowcharts in the content
With Markdown editor and corresponding rendering library support, you can freely write mathematical formulas and flowcharts in the content area of AnQiCMS.
The Markdown syntax for mathematical formulas:
MathJax usually supports inline formulas and block-level formulas in two forms.
Inline formula: Use a single dollar sign
$Enclose the formula, for example,$ E=mc^2 $.Block formula: use two dollar signs
$$Enclose the formula, it will occupy a line by itself and be centered, for example:$$ \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$
Markdown syntax for flowcharts:
Mermaid flowcharts need to be in a specialmermaidBlock defined. Just insert a code block in the Markdown editor and specify the language asmermaidThen, write your flowchart code according to the Mermaid syntax rules.
For example, a simple flowchart can be written like this:
```mermaid
graph TD
A[开始] --> B{决策};
B -- 是 --> C[行动1];
B -- 否 --> D[行动2];
C --> E[结束];
D --> E;
`
After you publish content containing this, the front-end page will automatically parse and render the mathematical formula and flowchart you expect.Generally, AnQiCMS automatically handles the conversion of Markdown to HTML in the Markdown editor after it is enabled.archiveDetailWhether the content tags have been usedrender=trueParameters to ensure Markdown content is correctly converted.
Summary: Make your content more expressive.
By the above simple configuration, your AnQiCMS website can perfectly present professional mathematical formulas and clear flowcharts in articles.This not only makes your content more expressive, but also enables it to convey complex technical information more efficiently and accurately, greatly enhancing the reader's reading experience.Whether it is to publish technical tutorials, scientific research reports, or data analysis articles, AnQiCMS can become a powerful assistant for your content creation.
Frequently Asked Questions (FAQ)
1. Why did I enable the Markdown editor and add the JS library, but the formulas and flowcharts still do not display on the website front end?
This usually has several possible reasons. First, please carefully check if you have provided all the<link>and<script>labels accurately added to your website template'sbase.htmlthe file<head>Label inside. Any spelling errors, omissions, or incorrect label placement may cause rendering to fail.Secondly, make sure you have cleared the AnQiCMS system cache after modifying the template,