How to enable Markdown editor in AnQiCMS and display mathematical formulas and flowcharts correctly?
Hello! As a website operator who is deeply familiar with the operation of AnQiCMS, I fully understand the importance of displaying complex information such as mathematical formulas and flowcharts in content creation.High-quality, interactive content is the key to attracting and retaining users.I will explain in detail how to enable the Markdown editor in AnQiCMS and ensure that mathematical formulas and flowcharts are displayed correctly.
In AnQiCMS, enable Markdown editor and correctly display mathematical formulas and flow charts
In AnQiCMS, we fully understand the importance of rich content display for enhancing user experience and content value.New AnQiCMS introduces support for Markdown editors for content creators, which greatly simplifies the formatting of content and provides the possibility of inserting mathematical formulas and flowcharts.To make full use of these features, we need to perform simple configuration on the back-end and introduce the necessary third-party libraries in the front-end template.
Enable Markdown editor
Firstly, we need to activate the Markdown editor on the AnQiCMS backend.This is a simple step, make sure your content input interface can recognize and process Markdown syntax.
You need to navigate to the management background of AnQiCMS,Global Settingsand then selectContent settings. In the content settings page, you will find an option toEnable Markdown editor. Check this option and save the settings to use Markdown for creation in the document editing interface.
Apply Markdown default style to web page content
The display effect of Markdown content on the front end requires some basic CSS styles to beautify and make it more readable.We can leverage external CDN resources, such as GitHub's Markdown styles, to quickly provide a graceful visual presentation for our Markdown content.
To apply these styles, you need to edit the universal template file of the website, usuallybase.htmlthe file. In<head>The internal tag, add the following CSS link:
<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 will give your Markdown content a clean, professional default style, similar to the rendering effect of Markdown on GitHub.
Correctly displays mathematical formulas
It is crucial for websites that need to display complex mathematical expressions, such as tutorials, scientific research, or educational content, to render mathematical formulas correctly.AnQiCMS integrates the MathJax library, which can convert mathematical formulas written in LaTeX syntax into clear, high-quality typesetting.
To display mathematical formulas correctly on a webpage, you also need tobase.htmlthe file<head>Inside the tag, add the MathJax JavaScript reference:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Once MathJax is integrated, you will be able to use LaTeX syntax to write mathematical formulas in the Markdown editor. For example, inline formulas can be used$Wrap, such as$E=mc^2$; Block-level formulas can be used$$Wrap, such as$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$.
Display the flowchart correctly
Flowcharts are a visual representation of business logic, algorithm steps, or complex system architecture, which is very helpful for improving the understandability of content.AnQiCMS supports rendering flowcharts, sequence diagrams, and other text-based diagrams using the Mermaid library.
To display the flowchart correctly on the web, you need to add Mermaid's JavaScript code inside thebase.htmlthe file<head>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 configuration, you can use Mermaid's specific syntax to create flowcharts in Markdown content. For example, a simple flowchart can be represented as follows:
graph TD
A[Start] --> B{Decision?};
B -- Yes --> C[Action];
C --> D[End];
B -- No --> E[Wait];
E --> B;
Matters to be paid attention to during content creation
When writing content in a Markdown editor, please ensure that the mathematical formula and flowchart syntax you use are correct, and strictly follow the LaTeX and Mermaid specifications.AnQiCMS content management system is responsible for converting Markdown content to HTML, and the CDN script we introduce will further render these special contents on the browser side.
In addition, using in the templatearchiveDetailorpageDetailTags outputting Markdown content includeContentWhen a field is, if the content contains HTML tags (Markdown conversion will generate), in order to avoid the browser from automatically escaping, we usually cooperate with|safeA filter to ensure that the HTML structure is rendered correctly. For example: {{articleContent|safe}}. If the Markdown editor is enabled, the system will automatically convert Markdown to HTML. If you want to manually control whether to convert,ContentField labels also supportrender=true(Force conversion) orrender=false(Do not convert) parameter.
By following these steps, your AnQiCMS website will be able to provide more rich and professional Markdown content display, including beautiful mathematical formulas and clear flow charts, greatly enhancing the user's understanding of the content and the professional image of the website.
Frequently Asked Questions (FAQ)
1. Why did I enable the Markdown editor but the mathematical formulas and flow charts are still not displayed on the front-end page?
Even if you have enabled the Markdown editor in the AnQiCMS backend and used mathematical formulas (LaTeX) or flowchart syntax (Mermaid) correctly, they still require the corresponding JavaScript libraries to be rendered on the front-end page. Make sure you have followed the instructions in this document, inbase.htmltemplate file<head>In the tag, correctly introduced CDN links for MathJax and Mermaid. Without these client rendering libraries, the browser will not be able to recognize and display these complex elements.
2. Inbase.htmlWhat should you do if the website access speed is affected after adding CDN links?
External CDN services are convenient, but their loading speed may be affected by the user's geographical location or network conditions. If you find that the CDN is slow and causes page rendering delays, you may consider downloading these JS/CSS files to your own server and modifyingbase.htmlThe path points to local resources. This can better control the speed of resource loading, especially when facing users in specific regions.Please note that self-hosting requires you to be responsible for updating and maintaining the files.
3. What Markdown syntax does the Markdown editor support? How can you learn these syntaxes?
AnQiCMS's Markdown editor supports standard Markdown syntax, including titles, lists, links, images, code blocks, quotes, and more.On this basis, by integrating MathJax and Mermaid, it also supports LaTeX mathematical formulas and Mermaid flowcharts/sequence diagrams, etc.You can refer to the official Markdown tutorial (such as the GitHub Flavored Markdown guide), the beginner's document of LaTeX, and the official document of Mermaid to learn these advanced syntaxes.Generally, online Markdown editors also provide real-time preview features, which can help you quickly master and debug syntax.