How to enable Markdown editor and display mathematical formulas and flowcharts correctly in AnQi CMS?
As an experienced website operator, I am well aware that the diversity of content forms is crucial for attracting and retaining users.AnQiCMS is an efficient content management system that not only provides powerful content publishing and management functions, but also keeps up with technological trends, supports Markdown editors, and greatly enhances the efficiency and expressiveness of content creation.For websites that need to display complex information, such as technical tutorials, academic articles, or project plans, the ability to integrate mathematical formulas and flowcharts into the content becomes particularly crucial.This article will elaborate on how to enable Markdown editor in AnQiCMS, and ensure that your website can accurately render mathematical formulas and flowcharts, providing a better reading experience for readers.
Enable Markdown editor in AnQiCMS
Firstly, you need to use the AnQiCMS Markdown editor feature and make simple configurations in the background.Please log in to your AnQiCMS admin interface, then navigate to the "Admin Settings" menu, and select the "Content Settings" option.In the content settings page, you will find an option named "Enable Markdown Editor".Check this option and save the settings, and you can use Markdown syntax when editing articles or pages.Once enabled, your content creation will support Markdown formatting, laying the groundwork for the integration of mathematical formulas and flowcharts in the future.
Display Markdown default style correctly
Markdown content may be displayed as plain text by default, lacking aesthetics and readability.To make the rendered content of Markdown have an elegant and consistent style, we usually introduce a CSS style library.A widely adopted and effective choice is GitHub's Markdown style.To apply this style, you need to edit your website template file.
In the AnQiCMS template system,base.htmlIt is usually the header and footer template for all pages. Please find your template directory (usually/templateunder the current template folder you are using), then openbase.htmlthe file. In the file's<head>Inside the tag, add the following CSS reference code:
<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" />
This code will load the GitHub-style Markdown stylesheet from CDN, making your Markdown content appear professional and easy to read on the frontend page.
Proper display of mathematical formulas (LaTeX/MathML)
For content that includes mathematical formulas, Markdown itself cannot directly render these complex expressions.We need to use a special JavaScript library - MathJax to parse and display mathematical formulas written in LaTeX or MathML syntax.
Similarly, you need tobase.htmlthe file<head>Add the MathJax reference script immediately after the Markdown style inside the tag:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
After adding this script, you can use LaTeX syntax to write mathematical formulas in Markdown content. For example,$E=mc^2$will be rendered as an inline formula, while$$\frac{-b \pm \sqrt{b^2-4ac}}{2a}$$It will be rendered as an independent block-level formula. Please ensure that your mathematical formula follows the LaTeX or MathML syntax supported by MathJax.
Display flow chart correctly (Mermaid)
Flowcharts are powerful tools for visualizing complex processes and logic.AnQiCMS integrates the Mermaid.js library, making it possible to create and render flowcharts directly in Markdown.In order to display the Mermaid flowchart correctly on your AnQiCMS website, you need tobase.htmlAdd Mermaid's JavaScript reference in the file.
Pleasebase.htmlthe file<head>Inside the tag, or<body>Before the tag ends, add the following Mermaid script:
<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 introduces the Mermaid library and initializes it, enabling it to parse Mermaid syntax in Markdown. For example, you can enter the following content in a Markdown editor to create a flowchart:
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Save and preview the document and you will see these texts rendered as corresponding flowcharts.Mermaid supports various chart types such as sequence diagrams, Gantt charts, and more. You can explore more usage according to your needs.
Content creation and verification
After completing the above configuration, you can use Markdown syntax and embed mathematical formulas and flowcharts in the content editor on the AnQiCMS backend.Before publishing any content that includes these special elements, it is strongly recommended that you preview and test on the front-end page to ensure that all formulas and charts can be loaded and displayed correctly.If any rendering issues are found, please check carefullybase.htmlIs the CDN link included correctly, and does the syntax of the Markdown content comply with the requirements of the corresponding library (MathJax or Mermaid)?
Summary
By simple steps, enable Markdown editor and integrate support for mathematical formulas and flowcharts in AnQiCMS, which can greatly enrich the expression of your website's content.This not only improves the efficiency of content creation, but also provides your target audience with a more professional and attractive reading experience. Whether it's technical documents, teaching materials, or business reports, they can be presented in a clearer and more intuitive way.
Frequently Asked Questions (FAQ)
Ask: Why do mathematical formulas and flowcharts still not display after I have enabled the Markdown editor?
Answer: Enabling the Markdown editor simply allows you to create content using Markdown syntax in the background. To properly render mathematical formulas and flowcharts, you also need to enable the appropriate settings on your website.base.htmlManually add the corresponding CSS and JavaScript references in the template file. Specifically,github-markdown-cssThe default style for Markdown content,MathJaxUsed to parse and display mathematical formulas, as well asMermaid.jsUsed to render flowcharts. Please carefully check the introduction of these external resources according to the guidance of this article, to ensure that they are placed correctly.<head>Tag inside.
Ask: Can I download these CDN resources to my local server instead of using CDN links?
Answer: Yes, you can choose to downloadgithub-markdown-css/MathJaxandMermaid.jsThe resource file has been downloaded to your server and modifiedbase.htmlThe reference path points to a local file. This approach can avoid dependency on external CDNs, improve the stability of resource loading, and, in some cases, enhance the page loading speed.However, please note that you should regularly update the local files to get the latest features and security patches.
Question: How can I ensure that my mathematical formula and flowchart syntax are correct in the Markdown editor?
Answer: For mathematical formulas, you usually need to use LaTeX syntax. Inline formulas are enclosed with a single dollar sign$for example$E=mc^2$), block-level formulas are enclosed with double dollar signs$$for example$$\sum_{i=1}^n i = \frac{n(n+1)}{2}$$)。For flowcharts, you need to use Mermaid syntax, and wrap it with specific code block tags, such as frommermaid``````开始，到“End. We suggest you consult the official documentation of MathJax and Mermaid to understand their detailed syntax specifications and supported chart types.Many online Markdown editors also provide real-time preview features to help you verify that the syntax is correct.