How to correctly display Markdown content, mathematical formulas, and flowcharts in AnQiCMS templates?
As an experienced AnQiCMS website operator, I am well aware of the importance of efficiently and accurately displaying diverse information in the increasingly rich online content ecosystem.Markdown is a lightweight markup language that is popular for its simplicity and efficiency.While mathematical formulas and flowcharts are essential expressions for conveying science, technology, or complex logic.This article will elaborate on how to properly configure the AnQiCMS template to perfectly present these advanced contents.
Firstly, the basis for correctly displaying Markdown content is to enable the AnQiCMS built-in Markdown editor.You need to navigate to the management interface of AnQiCMS backend and go to the 'Content Settings' option under 'Global Settings'.Here you will find the relevant configurations to enable Markdown editor.After activating this feature, the system will recognize and parse Markdown syntax when processing the content field, laying the foundation for subsequent display work.
After enabling Markdown in the content editor, we need to ensure that the Markdown text, when converted to HTML, is presented in a beautiful and standardized style.The GitHub-style Markdown is known as an industry fact standard due to its clarity and readability.github-markdown-cssCSS stylesheet to apply this style on your AnQiCMS site. Just edit the template file in thebase.htmlThis is usually a public template file inherited by all pages, in its<head>the tag the followinglinkTags:
<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 this operation, your Markdown content will automatically be rendered with a unified and professional display style.
For web content containing mathematical formulas, relying solely on Markdown rendering is not enough, and a dedicated JavaScript library is needed to parse and beautify the formulas.MathJax is a powerful cross-browser JavaScript rendering engine that can render mathematical symbols in high quality and accessibility.base.htmlthe file<head>Partly introduce the MathJax script. Please add the followingscriptTags:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
When you use mathematical formulas written in LaTeX or AsciiMath formats (for example, using$or$$Wraps the formula), MathJax will automatically detect it when the page loads and render it as a clear graphic or scalable SVG.
Flowcharts are an effective tool for visualizing complex processes and logic.Mermaid is a JavaScript chart and flowchart tool based on Markdown, allowing you to directly write chart definitions in Markdown.base.htmlthe file<head>Introduce the Mermaid JavaScript library and initialize it. Please add the followingscriptcode block:
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
This configuration will enable your AnQiCMS page to recognize Mermaid syntax blocks (usually `mermaidcode blocks), and render them as interactive flowcharts.
During the process of content creation and publishing, you simply need to use the Markdown syntax in the text editor of AnQiCMS backend to write articles, product descriptions, or single-page content. For example, you can use standard Markdown headings, lists, links, and can also directly embed mathematical formulas such as$$E=mc^2$$) and Mermaid flowchart code block:
```mermaid
graph TD;
A[开始] --> B{决策};
B -- 是 --> C[执行A];
B -- 否 --> D[执行B];
C --> E[结束];
D --> E[结束];
`
AnQiCMS'archiveDetailTag calling content field (such asContentWhen, it will automatically convert Markdown to HTML according to the background settings. You can also userender=trueorrender=falseParameters are used to explicitly control whether this conversion is performed, but this is usually not necessary after enabling the Markdown editor.
By following these steps, your AnQiCMS site will be able to flexibly and professionally display Markdown text, complex mathematical formulas, and intuitive flowcharts, greatly enriching the expressiveness of content, meeting the reading needs of different types of users, thereby enhancing the professionalism and user experience of the website content.
Frequently Asked Questions (FAQ)
1.I have enabled the Markdown editor on the AnQiCMS backend and used Markdown syntax in the content, but the content on the page still only looks like simple text without any beautiful style, why is that?
Even if Markdown editor is enabled, the system merely converts Markdown syntax to HTML structure, but by default, no specific styles are applied to these HTML elements. To make the Markdown content on your website look as beautiful as GitHub, you need to customize the website template'sbase.htmlthe file<head>Partially manually introducedgithub-markdown-cssStyle sheet. This CSS file provides preset style rules to beautify the converted Markdown elements.
2. I embedded mathematical formulas in the content of AnQiCMS (such as$$E=mc^2$$) or Mermaid diagrams, but they only display as raw text code on the front-end page and are not rendered correctly as formulas or charts, what is the reason for this?
The Markdown editor can convert text of formulas and flowcharts into HTML, but the actual rendering requires a dedicated JavaScript library. For mathematical formulas, you need tobase.htmlIntroduce the MathJax library; for Mermaid flowcharts, it is necessary to introduce the Mermaid library and initialize it. These JavaScript libraries are responsible for parsing specific markers in the page (such as$$...$$ormermaid), and make it dynamically transformable into readable mathematical formulas or visual charts. Ensuring that these scripts are correctly introduced and loaded is crucial.
3. Do I need to re-add Markdown styles, mathematical formulas, and JS/CSS references for flowcharts every time I create a new content page or template file?
Do not need. The template system of AnQiCMS usually adopts the inheritance mechanism.base.htmlThe file is the root template of your website, all other page templates (such as article detail pages, category list pages, etc.) usually inherit thisbase.html. Therefore, you only need to correctly add these in thebase.htmlthe file<head>taglinkandscriptOnce referenced, they will automatically apply to all inheritancesbase.htmlof the page, thus globally supporting the display of Markdown styles, mathematical formulas, and flowcharts.