How to embed and display mathematical formulas or flowcharts from the Markdown editor in the content?
In modern content operation, the professionalism and readability of content are equally important.It is often the key to improving user experience when our website involves fields such as technology, education, and engineering, how to clearly and beautifully display complex mathematical formulas or logically rigorous flowcharts in articles.AnQi CMS understands this need, integrating a powerful Markdown editor and combining it with simple frontend configuration, allowing your website to easily present these professional contents.
Step 1: Enable Markdown editor
To start using mathematical formulas and flowcharts on your Anqi CMS website, you first need to make sure that the Markdown editor is enabled.This is like adding a new skill to your content creation toolbox.It is very simple to operate:
- Log in to the AnQi CMS background.
- Navigate to the left menu's 'Background Settings', click 'Content Settings'.
- On this page, you will find an option for 'Enable Markdown Editor'. Be sure to check or enable it.
After enabling the Markdown editor, when you create or edit content in "Publish document" or "Page management", you can choose to create using Markdown mode.Markdown with its concise syntax, can help us organize content more efficiently, focusing on the text and logic itself, rather than complex formatting details.
Step two: Insert mathematical formulas and flowcharts in the content
The Markdown editor supports inserting mathematical formulas and flowcharts using specific syntax.
Insert mathematical formula:
The AnQi CMS Markdown editor supports LaTeX syntax for writing mathematical formulas. You can choose inline or block-level formulas as needed:
- Inline formula:Use a single dollar sign
$Enclose the formula. For example, if you want to insert a famous physical formula into a paragraph of text, you can write it like this:$E=mc^2$. - Block-level formula:Use double dollar signs
$$Enclose the formula, which will display the formula as a separate line and default to centered. For example, the formula for finding the roots of a quadratic equation can be written like this:$$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
Insert a flowchart:
The flowchart is defined through Mermaid syntax. Mermaid provides a concise text-based way to draw various charts, including flowcharts, sequence diagrams, and so on.A basic flowchart example is shown below:
graph TD
A[Start] --> B{Condition};
B -- Yes --> C[Perform Action A];
B -- No --> D[Perform Action B];
C --> E[End];
D --> E;
You need to paste the above code directly into the content area of the Markdown editor.
Step 3: Configure the website frontend to display correctly.
Although you have inserted these special syntaxes in the background, the browser itself cannot directly recognize and render LaTeX formulas or Mermaid charts.In order for them to be displayed correctly and beautifully on your website's frontend, we need to introduce some additional JavaScript libraries to act as 'translators' and 'rendering engines'.
These configurations are usually completed in thebase.htmlthe file<head>tags to ensure that these scripts can work when the page is loaded.
To introduce a unified and beautiful style for Markdown content (optional but recommended)To make the entire Markdown content present a more professional and consistent visual effect on the front end, you can introduce
github-markdown-cssThis not only beautifies the text around mathematical formulas and flow charts, but also improves the overall reading experience. Inbase.htmlthe file<head>Add 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" />Introducing MathJax support for rendering mathematical formulasMathJax is a widely used open-source JavaScript display engine, specifically designed to render high-quality mathematical formulas in web browsers.With it, your LaTeX formula can be correctly interpreted and rendered by the browser. In
base.htmlthe file<head>Add the following script inside the tag:<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>Introduce Mermaid support for flowchart renderingThe Mermaid library is the core for parsing and rendering Mermaid syntax.By introducing it, you can convert the flowchart you write in Markdown into a visual graphic. In
base.htmlthe file<head>Add the following script 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>Please note,
mermaid.initialize({ startOnLoad: true });This line of code is crucial, it indicates that Mermaid will automatically scan and render all Mermaid charts after the page is loaded.
Actual application and tips
After completing the above front-end configuration, the mathematical formulas and flowcharts you insert in the AnQi CMS backend Markdown editor will display normally on the front-end page.After publishing or updating the content, it is recommended that you immediately view it on the front-end page, and pay attention to any error messages in the browser console (open with F12), which will help you locate and solve any potential problems.Sometimes, you may also need to clear the browser cache (Ctrl+F5 force refresh) to ensure that the latest front-end configuration and content are loaded.
The combination of AnQi CMS's Markdown editor with these powerful front-end rendering libraries brings unprecedented expressiveness to your website content.Whether it is complex theoretical derivation or clear display of business processes, it can be easily realized through this concise and efficient way, greatly enhancing the professionalism and user experience of the website.
Frequently Asked Questions (FAQ)
Why did I configure according to the steps, but the mathematical formula or flowchart still does not display?First, please confirm that you have enabled the Markdown editor in the "Global Settings" -> "Content Settings" of the Anqi CMS backend. Second, check carefully that the MathJax and Mermaid inclusion code is accurately placed in your website template
base.htmlthe file<head>Within the tag. Especially whether the CDN link is correct and not blocked by a firewall or security plugin.In addition, try clearing the browser cache or accessing the page in incognito mode to exclude cache interference.If the problem still exists, please open the browser developer tools (usually press F12), check the "Console" or "Network" tab to see if there are any failed resources or JavaScript error messages, which can help you further diagnose the problem.Where can I use the Markdown editor for content types?Once the Markdown editor is enabled in the background, it is usually applied to all areas that support rich text editing, including the content text in "publish documents" (such as articles, products, etc.) and the main content in "page management". As long as you have the option to switch to Markdown mode below the content input box while editing content,