How to correctly use the Markdown editor on the AnqiCMS website and display mathematical formulas and flowcharts?
As a senior security CMS website operation person, I am fully aware of the importance of content diversity and professionalism in attracting and retaining users.When dealing with technical, academic content, or content that requires clear logical demonstration, the Markdown editor combined with mathematical formula and flowchart functions can undoubtedly greatly enhance the expressiveness of the content.The newly added Markdown editor feature in AnQi CMS is exactly to meet such needs, making content creation more efficient and professional.
Make full use of this powerful feature and ensure that mathematical formulas and flowcharts are rendered correctly on your AnqiCMS website, some preliminary configuration and content writing adjustments are required.This will be an in-depth introduction on how to implement these features in AnqiCMS.
Enable Markdown editor
First, we need to activate the Markdown editor in the AnqiCMS admin system.This is the prerequisite for using this feature.Global Settingsand then selectContent settings.In the settings page, find and enable the Markdown editor option.After enabling, when you create or edit document content, you can switch to Markdown mode in the editor interface to create content.
Unified Markdown style display
To achieve a unified and beautiful display effect for content written in Markdown on the front-end page, we can introduce a universal Markdown stylesheet.This ensures that the content is readable on different browsers and devices.We usually rely on CDN services to introduce these public resources.
In your AnqiCMS template file (usuallytemplateUnder the directorybase.htmlthis is the base template inherited by all pages) of<head>Add the following HTML code in the tag.This line of code introduces a commonly used GitHub style Markdown stylesheet, providing basic formatting and styles for your Markdown content.
<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" />
By introducing this style, your Markdown content will display a clear and readable layout on the web page, enhancing the user experience.
Correctly displays mathematical formulas
For content that needs to display mathematical formulas, such as physics, engineering, or statistics articles, Markdown editors support writing formulas using LaTeX syntax.However, the browser itself does not directly support rendering LaTeX formulas and requires the use of a third-party JavaScript library to implement it.MathJax is a widely used solution that can convert LaTeX syntax into beautiful mathematical symbols.
In order to correctly render mathematical formulas on your web page, you also need tobase.htmltemplate file<head>In the tag, add the CDN reference script for MathJax.This line of script will asynchronously load the MathJax library, so that it can process and display mathematical formulas after the page is loaded.
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
After adding this script, the LaTeX mathematical formula (such as inline formula) that you write in the Markdown content$E=mc^2$or block-level formula$$\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}$$) can be parsed and displayed correctly.
Display the flowchart correctly
Flowcharts are an effective way to display complex processes and logic, helping readers quickly understand information.AnqiCMS's Markdown editor also supports inserting flowcharts, which is usually implemented through the Mermaid.js library.Mermaid allows you to use a concise text syntax to define flowcharts, sequence diagrams, and more, and render them as SVG images.
To enable the display of the flowchart on the web, you need tobase.htmlAdd the Mermaid.js inclusion and initialization code to the template file. It is recommended to place this script before the</body>tag to ensure that the DOM elements are loaded completely.
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
By introducing and initializing Mermaid, you can now use its syntax to create various diagrams in Markdown content. For example, a simple flowchart might look like this:
graph TD
A[Start] --> B{Decision?};
B -- Yes --> C[Perform action];
C --> D[End];
B -- No --> D;
Mermaid'sstartOnLoad: trueConfiguration means it will automatically find and render all code blocks that comply with Mermaid syntax when the page is loaded.
Create Markdown content in the document
After completing the above configuration, you can use AnqiCMS'sContent ManagementCreate a new document or edit an existing document in the module.In the document editing interface, select the Markdown editor mode.Here, you can use standard Markdown syntax to write text, and embed LaTeX mathematical formulas and Mermaid flowchart text definitions in it.After saving and publishing the document, this content will be displayed on your website's front end in a professional and visual form.
Frequently Asked Questions
Q1: I have enabled Markdown editor and added CDN references according to the steps, but the mathematical formulas or flowcharts still do not display. What should I do?
A1: Please check your network connection to ensure that CDN resources can be loaded normally. Then, confirm whether you have added the relevant<link>and<script>tags tobase.htmlthe correct location of the file (<head>or</body>Before).Check the browser console (open with F12) to see if there are any JavaScript error messages.$or$$Wrap) and flowchart code block (usingmermaidThe syntax is correct. Finally, clear your browser cache and AnqiCMS system cache to ensure you are loading the latest version of the page.
Q2: How to write mathematical formulas and flowcharts in a Markdown editor? What syntax do they use?
A2: Mathematical formulas usually use LaTeX syntax. For inline formulas, you can enclose them with a single dollar sign, such as$E=mc^2$; For block-level formulas displayed on a separate line, use double dollar signs to enclose, such as$$\sum_{i=1}^n i = \frac{n(n+1)}{2}$$. Flowcharts are specified using Mermaid syntax, you need to specify it at the beginning of the Markdown code blockmermaidLanguage, for example:
graph TD
A[User] --> B(Submit form);
B --> C{Data validation?};
C -- No --> D[Return error];
C -- Yes --> E[Save data];
The detailed Mermaid syntax can be checked in the official documentation for more chart types and usage.
Q3: Can I customize the style of Markdown content or adjust the rendering effect of formulas and flowcharts?
A3: Yes. You have introduced thegithub-markdown-cssIt is just a basic style.You can override or extend these styles in your custom CSS file.For example, adjust the font, color, and other properties of the code block by modifying CSS.For MathJax and Mermaid, they both provide rich configuration options.mermaid.initialize()The method also accepts a configuration object that allows you to control the default theme, font, and other properties of the chart. For specific configuration methods, please refer to their respective official documents.