How to enable Markdown rendering and correctly display mathematical formulas and flowcharts in AnQiCMS?
In AnQiCMS, to make your content more expressive, especially when you need to display complex mathematical formulas or clear flowcharts, it is a very effective solution to flexibly use the Markdown editor.The new version of AnQiCMS has provided good support for this.Next, we will explore how to enable these features in AnQiCMS, making your website content come alive.
Step 1: Enable Markdown Editor
To start using Markdown to write content, we first need to enable it in the AnQiCMS backend settings. It's very simple, just a few clicks to complete.
Please log in to your AnQiCMS backend, navigate to 'Global Settings', and then select 'Content Settings'.On this page, you will find an option called 'Markdown Editor'.Please set its status to "Enabled" and save your changes.
After completing this step, when you create or edit articles, product details, or single-page content in the background, the original rich text editor interface will be replaced by the Markdown editor.This means you can directly use Markdown syntax for content creation, which greatly improves editing efficiency and the structuring of content.
Step two: Apply a beautiful default style to Markdown content
Although Markdown editors make content creation convenient, the Markdown syntax itself only defines the structure of the content, but not their display styles.To make your Markdown content look professional and beautiful on the front-end page, we need to introduce a set of universal Markdown rendering styles.
We recommend usinggithub-markdown-cssThis is a widely popular GitHub style Markdown style. You can easily integrate it into your website via CDN.
Please find your website template file, usually in/templatethe directory, wherebase.htmlthe file is the basic skeleton shared by all pages of your website. Openbase.htmlthe file, and<head>at the end of the tag, </head>Before, add the following line of 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" />
Savebase.htmlAfter the file, your website will have the ability to render GitHub style Markdown content.After publishing Markdown articles, they will automatically apply this simple and readable style.
Step 3: Make mathematical formulas display correctly on the web
For users who need to insert mathematical formulas into articles, AnQiCMS also provides a solution.By integrating the powerful JavaScript display engine MathJax, your website can elegantly render LaTeX, MathML, or AsciiMath formatted mathematical formulas.
Similarly, you need tobase.htmlthe file<head>Inside the tag, after adding the CSS style in the previous step, insert the following script code:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Now, you can use LaTeX syntax to write mathematical formulas in Markdown content. For example, using$inline formulas enclosed by$E=mc^2$, or using$$Enclosed block-level formula:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
These formulas will be rendered into clear and recognizable mathematical symbols on the page by MathJax.
Step four: Draw a clear flowchart on the web.
Flowcharts are a tool for visualizing complex processes, system architecture, or decision paths.AnQiCMS integrates the Mermaid library, allowing you to directly write text in Markdown and automatically convert it into a beautifully formatted flowchart.
Please continue onbase.htmlthe file<head>Within the tag, after the MathJax script, add the following script code:
<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 create Mermaid flowcharts in Markdown content. Just use special Mermaid code blocks, such as:
graph TD;
A[User] --> B(Submit form);
B --> C{Validate data?};
C -- Yes --> D[Process data];
C -- No --> E(Show error);
D --> F[Save successfully];
F --> G[Notify user];
This simple text description will be automatically rendered into a professional flowchart on your web page.
Write and publish Markdown content
After completing all the above configurations, you can freely use the AnQiCMS backend editor.When you create or edit a document, you just need to enter Markdown syntax directly in the Markdown editor, including LaTeX code for mathematical formulas and Mermaid code for flowcharts.AnQiCMS is responsible for rendering and displaying on the front-end page, making your content professional and easy to understand.
Frequently Asked Questions (FAQ)
1. I have enabled the Markdown editor and written formulas and flowcharts in the article, but they are not displayed on the front end or the style is incorrect, what should I do?
First, make sure you follow the steps in the article on your website,base.htmland correctly import the file.github-markdown-cssCSS, as well as the JavaScript scripts for MathJax and Mermaid.Please carefully check if there are any spelling errors in the file path and code, or if the CDN link is valid.<head>Label inside. Sometimes, browser cache may also cause problems, try clearing the browser cache and then accessing the page.
2. Can I only use Markdown rendering for some articles and not all?
After enabling AnQiCMS's Markdown editor, the content you edit in it will be stored and rendered in Markdown format by default.If you need to disable or force Markdown rendering in specific situations, you can control it on the template tag of the content field.{% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent|safe}}{% endarchiveDetail %}You can force the Markdown rendering to be turned off. Conversely,render=trueYou can force Markdown rendering even if the editor is not enabled globally.
3. My flowchart and mathematical formulas are displayed normally, but the overall style of Markdown still looks a bit off, different from the example image.
This is usually because your website template may come with some global CSS styles that may override or affectgithub-markdown-cssThe effect.You can try to use the browser's developer tools (usually open by pressing F12), to check the CSS rules applied to the Markdown elements.!importantBut the latter should be used with caution), or slightly modifying your template CSS, it usually resolves style conflicts and allows Markdown content to display as expected.