How does AnqiCMS ensure that mathematical formulas and flowcharts can be displayed correctly on the front end after enabling the Markdown editor?
Today, with the increasing diversity of content creation, websites not only carry text and images, but also often need to display complex mathematical formulas or intuitive flowcharts.For those who use AnqiCMS, the good news is that the system is already built-in with strong Markdown editor support, and through simple configuration, it can ensure that these professional contents are perfectly presented on the website front-end.Below, let's take a look at how to operate, making your website content richer and more professional.
Turn on the Markdown editor: the first step in content creation
To enable AnQi CMS to support the display of mathematical formulas and flowcharts, you first need to make sure that you have enabled the Markdown editor in the background. It's very simple, just go toAnQi CMS background -> Global settings -> Content settingsHere you can find and enable the Markdown editor feature.Once enabled, you can directly use Markdown syntax when editing articles, single pages, and other content.
Core protection: Integrating external capabilities through templates
Markdown itself provides a concise syntax for marking content structure, but to truly convert mathematical formulas (such as LaTeX syntax) and flowcharts (such as Mermaid syntax) into visually renderable graphics, it is necessary to use special JavaScript libraries for parsing and rendering on the browser side.The design of AnQi CMS is very flexible, allowing us to integrate these third-party libraries into template files to achieve this goal.
Generally, we need to modify the website'sBasic template filebase.htmlThis file is the common skeleton for all web pages of the site, and the references added here will take effect on each page, saving the trouble of configuring each content separately.
1. Basic Markdown Styles: Make Layout More Beautiful
Firstly, in order to make the rendered content of Markdown more harmonious and beautiful, we can introduce a universal Markdown stylesheet. For example, usinggithub-markdown-cssIt is a good choice, which can make your Markdown content have a concise style similar to GitHub. You canbase.htmlthe file<head>add the following CSS reference within the tag:
<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 reference will load a CSS file through CDN, providing unified styles for Markdown content, making them look more professional and readable on the page.
2. The Magic of Mathematical Formulas: MathJax
For mathematical formulas containing LaTeX syntax, MathJax is a widely used JavaScript rendering engine in the industry.It can parse and render LaTeX code on the page into high-quality mathematical symbols, clearly displaying complex integrals, derivatives, or matrices.base.htmlthe file<head>Add the MathJax CDN reference within the tag:
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
HereasyncThe attribute indicates that the script will load asynchronously, without blocking the rendering of the page, thus enhancing the user experience. After MathJax is loaded, it will automatically scan the content of the page, search for, and render mathematical formulas.
3. The Art of Flowcharts: Mermaid
The flowchart can be implemented with the Mermaid library.Mermaid allows you to define various charts using simple text syntax, such as flowcharts, sequence diagrams, Gantt charts, etc., and then render them into SVG images.base.htmlthe file<head>Add Mermaid's CDN reference and initialization code inside the tag:
<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 will import the Mermaid module and initialize it to ensure that Mermaid can automatically find and render the flowchart code blocks in the Markdown content after the page is fully loaded.
A tip: automatic rendering of the content field
It is worth mentioning that the Anqi CMSarchiveDetailThe tag is retrieving the document content(ContentIf the background is enabled Markdown editor, it will automatically convert Markdown formatted content to HTML. This means that when you use{{archive.Content|safe}}or{% archiveDetail with name="Content" %}When content is displayed, Markdown, mathematical formulas, and flowcharts will be automatically parsed.
If in some cases you need more fine-grained control, for example, if you do not want Markdown to be automatically converted to HTML in specific scenarios, you can controlarchiveDetailthe tag withrenderthe parameters,render=trueIt will be forced to convert, whilerender=falseIt will retain the original Markdown text. This provides great flexibility for content display.
Content creation and presentation:
After completing the above template configuration, you can freely create content in the Anqi CMS Markdown editor that includes mathematical formulas and flowcharts. For example, a simple mathematical formula can be written as: $$E=mc^2$$And a flowchart can be represented like this:
graph TD;
A[Start] --> B{Decision?};
B -- Yes --> C[Perform action];
C --> D[End];
B -- No --> D;
Save and publish your content, the front-end page will automatically load the required JavaScript and CSS, presenting these professional contents in a beautiful and readable manner to the visitors.
Summary
By accessing the Anqi CMSbase.htmlA cleverly introduced several CDN resources in the template file, and we can easily elevate the capabilities of the Markdown editor to a new height.Whether it is complex scientific papers, algorithm formulas in technical documents, or project management flow charts, they can be perfectly displayed on your website, greatly enriching the form of expression of the website content and enhancing the user experience.
Frequently Asked Questions (FAQ)
1. I have turned on the Markdown editor, and I have also written formulas and flowchart code in the article content, but why is it still not displayed on the front end?
This is likely because you have not yet included the template file on the website (especiallybase.htmlIn the introduction, the JavaScript libraries MathJax and Mermaid are used.The Markdown editor itself only provides an editing environment, the actual rendering work needs to be done by these third-party libraries.base.htmlfile, make sure it includes the tags mentioned in the textMathJax-scriptandMermaidof<script>references.}
2. Do I need to add these CDN references separately to each Markdown page of the website?
No. We recommend adding these CDN references to the website.Basic template filebase.htmlof<head>Tag inside.base.htmlIs the skeleton of AnQi CMS template system, all other content pages will inherit this basic template. Therefore, as long as inbase.htmlConfigure once, all pages of the website will automatically obtain the rendering ability of mathematical formulas and flow charts.
3. If I do not want to use the Markdown editor, will the Content field still automatically render formulas and flowcharts?
In most cases, if you have turned off the Markdown editor in the background "Content Settings", thenarchiveDetailtags are being retrievedContentWhen a field is encountered, it will not automatically render the Markdown, formula, or flowchart code within it.ContentFields will be output in plain text. However, if you still want to manually render a section of content in a non-Markdown editing mode, you can use thearchiveDetailtag explicitly.render=trueparameters, for example{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}But the content of this section must be in Markdown format.