In website operation, we often need to display some professional content, such as mathematical formulas involving scientific calculations, or complex process diagrams for business process descriptions.The traditional way of displaying this content is often inefficient, difficult to maintain, and also cannot provide a good reading experience.AnQiCMS combines its powerful content management capabilities and support for Markdown to provide us with an elegant solution.By simply introducing some external libraries and enabling the Markdown editor, we can render these professional contents correctly and beautifully on the website page.

Open Markdown Editor

To begin embedding mathematical formulas and flowcharts on your page, you first need to make sure that the AnQiCMS backend Markdown editor is enabled.This is the basis for the system to recognize and process syntax of formulas and flow charts.

You just need to go to the AnQiCMS admin panelGlobal Settingsand then clickContent settings. Find and enable the Markdown editor feature on this page.After enabling, you can use Markdown syntax to write formulas and flowcharts when editing articles or page content.

Prepare the template file, import external rendering libraries

Markdown syntax itself is just a way of marking plain text. To correctly convert mathematical formulas and flowcharts into images visible to users, we need to use some powerful third-party JavaScript libraries.These libraries need to be included in the page of your website.

Generally, the template of your website will have a global foundation file, such asbase.htmlor a common header file referenced by multiple pages. It is recommended to place the reference code of these libraries in this shared file, usually in<head>tag or<body>The beginning of a tag, which ensures that they can be loaded on all related pages.

Optimize the display style of Markdown content.

To have Markdown content displayed well and consistently on your website, we can introducegithub-markdown-cssThe stylesheet allows your Markdown content to display in a style similar to GitHub, simple and generous.

In your template file's<head>part add the following 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" />

Render mathematical formulas correctly

The rendering of mathematical formulas usually requires a special engine. MathJax is a very popular choice that can render mathematical expressions in LaTeX, MathML, or AsciiMath formats into high-quality readable formulas on web pages.

Continue in your template file's<head>Part, followed by Markdown style, add MathJax reference:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Please noteasyncA property that allows the script to continue parsing the page while downloading, thus avoiding blocking the page load.

Correct rendering flowchart

The flowchart can be implemented using the Mermaid library.Mermaid allows you to create various diagrams using simple text descriptions, such as flowcharts, sequence diagrams, Gantt charts, and so on.

The way to introduce Mermaid is a bit different, it needs to be loaded in a modular way. Add the following code at the top of your template file.<head>or<body>Add the following code at the top:

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

Heretype="module"Ensured it is loaded as an ES module, andmermaid.initialize({ startOnLoad: true })Then it will automatically scan and render Mermaid diagrams in the page after loading.

Apply formulas and flowcharts in the content

After completing the above settings, you can use Markdown syntax to write mathematical formulas and flowcharts in the 'Document Content' editor when creating or editing documents in the AnQiCMS backend.

Mathematical formula:You can use LaTeX syntax to write mathematical formulas.

  • Inline formula (inline math):Use$公式内容$Enclosed, for example$E=mc^2$.
  • Block formula (block math):Use$$公式内容$$It wraps and takes up a line by itself, centered, for example:
    
$$
\int_0^1 x^2 dx = \left[ \frac{x^3}{3} \right]_0^1 = \frac{1}{3}
$$

Flowchart:The flowchart uses Mermaid syntax blocks. You need to usemermaid` 和` to enclose the text definition of the flowchart. For example:

```mermaid
graph TD;
    A[开始] --> B{决策};
    B -- 是 --> C[执行操作1];
    B -- 否 --> D[执行操作2];
    C --> E[结束];
    D --> E;

`

After adding this code to your document content, save and publish. When you access the front-end page, these formulas and flowcharts will be parsed and rendered into beautiful images by the corresponding libraries.

With these settings, your website content will no longer be limited to plain text and images, but will be able to flexibly display complex mathematical expressions and clear business processes, greatly enriching the form of content and enhancing professionalism and user experience.

Frequently Asked Questions (FAQ)

1. Why is my mathematical formula or flow chart not displaying correctly?When encountering this situation, please check the following points first:

  • Is the Markdown editor enabled?Make sure the Markdown editor is enabled in the "Global Settings -> Content Settings" of the AnQiCMS backend.
  • Is the external library correctly imported?Check your template file (such asbase.html) for MathJax and Mermaid's<script>or<link>The tag is complete, error-free, and the network connection is normal, the CDN resources can be loaded correctly.
  • Is the syntax correct?The LaTeX syntax for mathematical formulas and the Mermaid syntax for flowcharts are both strict. Any minor spelling or formatting error can cause rendering to fail.

Can I customize the style of mathematical formulas or flowcharts?Of course, you can. MathJax allows style adjustments through configuration or CSS for mathematical formulas.For flowcharts, Mermaid supports various themes, you canmermaid.initialize()passed inthemeto set the parameters, for examplemermaid.initialize({ startOnLoad: true, theme: 'dark' });. Moreover, since the rendered formulas and charts are essentially SVG or HTML elements, you can also further beautify them through custom CSS.

3. Will these rendering libraries affect the website's loading speed?Any external JavaScript library will have a certain impact on the page loading speed. However, MathJax and Mermaid are both optimized libraries, and we use CDN loading andasyncProperty (MathJax), this helps improve loading efficiency.If you have extremely high performance requirements, consider introducing these libraries only on specific page templates that contain formulas or flowcharts, rather than globally, to reduce the load burden on unnecessary pages.