How to enable Markdown editor in AnQiCMS background content settings to support mathematical formulas and flowcharts?
As an experienced website operation expert, I am more than happy to elaborate on how to enable the Markdown editor in the AnQiCMS backend content settings, support mathematical formulas and flowcharts, and help you create high-quality content more efficiently.
Unlock AnQiCMS content creation new dimension: easily enable Markdown, mathematical formulas and flowcharts
In the era where content is king, efficient and expressive content creation tools are particularly important.For AnQiCMS users, whether it is to write technical tutorials, publish product descriptions, or share academic knowledge, being able to flexibly use Markdown syntax, clearly present mathematical formulas, and intuitively draw flowcharts can undoubtedly greatly enhance the professionalism and attractiveness of the content.AnQiCMS is well aware of this need and has provided good support for the Markdown editor in the new version.This article will guide you in detail on how to enable these powerful features, giving your content creation a powerful boost.
First step: Enable Markdown editor in AnQiCMS backend
The process of turning on the Markdown editor is very intuitive. Please log in to the AnQiCMS management background and follow the path below:
First, click on the left-hand navigation bar titledBackend settings Next, select from the dropdown menu titledContent settings On the "Content Settings" page, you will find a field namedEnable Markdown EditorOption. Please check or switch it to 'On' status.
After completing this operation, when you enter the "Content ManagementThis means you can start writing content using Markdown syntax, including titles, lists, code blocks, links, images, etc., the editor will automatically preview the rendering effect for you in real time, greatly improving writing efficiency and consistency in layout.
Step 2: Integrate front-end rendering support for mathematical formulas and flow charts
Although the AnQiCMS backend has enabled the Markdown editor and can parse Markdown syntax into HTML, to make the browser correctly display complex mathematical formulas (such as LaTeX syntax) and flowcharts (such as Mermaid syntax), it is still necessary to introduce the corresponding JavaScript libraries for client-side rendering on the website front-end. This usually involves modifying some of the website template files, especially those responsible for the common parts of the page (such as the header or footer).base.htmlfile.
You need to enter the AnQiCMS template file directory to make these changes. According to the AnQiCMS template making conventions, the root directory of the template is usually located/templatebelow, whilebase.htmlFiles are generally the basic templates used by all pages. You can find and edit it through FTP tools or the 'Template Design' feature of AnQiCMS backend.
Please add the following code snippet tobase.htmlthe file<head>inside the tag. Typically, the inclusion of JavaScript libraries is placed in</body>Before the tag can optimize the page loading speed, but considering that mathematical formulas and flowcharts may need to be parsed when the page is loaded, put them in<head>and make use ofasyncThe attribute can ensure timely loading and rendering.
Introduce the default Markdown style (optional but recommended):Although AnQiCMS has already converted Markdown content to HTML, to achieve a more aesthetically pleasing and GitHub-style display, you can introduce a set of CSS styles.
<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 introduce GitHub-style Markdown rendering CSS, making your Markdown content display uniformly and beautifully on the front end.
cdnjs.cloudflare.comIt is a commonly used public CDN that can accelerate resource loading.Integrated MathJax (MathJax):MathJax is a powerful JavaScript rendering engine that can render mathematical formulas in TeX, LaTeX, MathML, and other formats with high-quality typesetting.
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>By introducing the MathJax script, your page will be able to recognize and render mathematical formulas in Markdown. For example, by using a single dollar sign
$to enclose text as$E=mc^2$It will be rendered as an inline formula, using double dollar signs$$to enclose text as$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$It will be rendered as a block-level formula.Integrated flowchart (Mermaid):Mermaid is a JavaScript-based chart and diagram tool that uses a Markdown-like text definition to quickly generate flowcharts, sequence diagrams, Gantt charts, and more.
<script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true }); </script>This script will introduce the Mermaid library.Once integrated, you can draw flowcharts in Markdown content using a specific text format.
```mermaid graph TD; A-->B; B-->C; C-->D; ```Mermaid will automatically parse and render it into a visual flowchart.
Donebase.htmlAfter modifying and saving the file, you may need to clear the AnQiCMS system cache to ensure the changes take effect (usually there is an 'Update Cache' button in the background).
Step 3: Create freely in the document content
Now, your AnQiCMS website is fully prepared to support Markdown, mathematical formulas, and flowcharts!
You can start creating in any Markdown editor (such as in 'Content Management' under 'Document Management' or 'Page Management').
- Markdown Basic Syntax:Use freely
#Create a title,*or-Create a list,**文本**Bold,_文本_Italic,`代码`Inline code, - Mathematical formula:
- Inline formula:Use
$Enclose the formula, for example$x^2 + y^2 = r^2$. - Block-level formula:Use
$$Enclose the formula, for example:markdown $$ \left( \sum_{k=1}^n a_k b_k \right)^2 \le \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) $$
- Inline formula:Use
- Flowchart:
- Define the chart type in the code block using Mermaid syntax (for example:
graph TDRepresents a flowchart from top to bottom), then define the node and connection relationships.
The editor will automatically recognize these syntaxes and render them on the page.```mermaid graph LR A[开始] --> B{决策}; B -- 是 --> C[执行操作]; B -- 否 --> D[结束]; C --> D; ``` - Define the chart type in the code block using Mermaid syntax (for example:
By following these steps, your AnQiCMS content creation experience will be significantly improved, allowing you to publish clear and professionally laid out content, as well as easily handle complex information with a strong technical component and the need for graphical assistance, greatly enriching the form of content expression and meeting the needs of a wider range of users.
Frequently Asked Questions (FAQ)
I have enabled the Markdown editor in the background and added the frontend rendering script, but why are my mathematical formulas or flowcharts still not displaying?First, make sure that your frontend rendering script is placed correctly in
base.htmlof<head>Within the tag, and the CDN resources (MathJax, Mermaid) can be accessed normally (check the browser console for any failed resource loading errors). Secondly, please confirm that the syntax you are using in Markdown is completely compliant with the specifications of MathJax (TeX/LaTeX) and Mermaid, for example, MathJax usually requires using$or$$Enclose the formula, the Mermaid chart needs to be placed in `mermaidIn the code block.Finally, in the AnQiCMS backend, when the Markdown editor is enabled, the system will automatically convert Markdown to HTML.These frontend scripts are responsible for further parsing specific tags in HTML (such as the tags required by MathJax and Mermaid), if the CMS fails to generate these tags correctly during the conversion of Markdown, the frontend scripts will also be unable to recognize them.Generally, if the official provided Mermaid and MathJax syntax is followed, AnQiCMS can correctly generate the corresponding tags.Can I use custom Markdown styles instead of GitHub styles?Of course you can. You just need to
base.htmlto introducegithub-markdown-cssof<link>tag and replace it with your own CSS file link, or in thelinkAfter the tag, introduce your custom CSS, and you can override the default style by using CSS selectors.AnQiCMS itself is a Markdown to HTML structure converter, you can completely control the display effects of these HTML elements through custom CSS.How do you manage images or videos inserted in the Markdown editor?AnQiCMS's Markdown editor usually provides a convenient interface for uploading images or files.When you upload images or videos through this interface, they will be stored in the "Page Resources" -> "Image Resource Management" (or Attachment Management) of AnQiCMS.The editor will generate the corresponding Markdown syntax link (for example,