In website operation, we often need to display some professional content, such as mathematical formulas involving scientific calculations, or complex flow charts explaining business processes.The traditional way of displaying these contents is often inefficient, difficult to maintain, and also fails to provide a good reading experience.AnQiCMS combines its powerful content management capabilities and support for Markdown, providing us with a graceful solution.By simply introducing some external libraries and enabling the Markdown editor, we can ensure that these professional contents are rendered correctly and beautifully on the website pages.

Turn on the Markdown editor

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

All you need to do is go to the AnQiCMS backendGlobal Settings, and then click.Content Settings.In this page, find and enable the Markdown editor feature.After enabling, you can use Markdown syntax to write formulas and flowcharts when editing article or page content.

Prepare template file, introduce external rendering library

Markdown syntax itself is just a way of marking plain text, to convert mathematical formulas and flowcharts correctly 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, your website's template will have a global foundation file, such asbase.html，or a public header file referenced by multiple pages. It is recommended to place the reference code of these libraries in this shared file, usually at<head>the end of the tag or<body>The beginning of the label, so that they can be loaded on all related pages.

Optimize the display style of Markdown content.

To ensure that Markdown content displays well and consistently on your website, we can introducegithub-markdown-cssThe stylesheet. This stylesheet allows your Markdown content to be presented on the web with a reading style similar to GitHub, simple and generous.

In your template file,<head>Part:

<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" />

correctly render mathematical formulas

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

Continue in your template file,<head>add the reference to MathJax after the Markdown style in the part,

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

Please noteasyncProperty that allows the script to continue parsing the page while downloading, to avoid blocking the page loading.

Correct rendering flowchart

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

Mermaid's introduction method is slightly different and needs to be loaded in a modular way. In your template file,<head>or<body>add the following code at the beginning:

<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 that it loads as an ES module, andmermaid.initialize({ startOnLoad: true })it will automatically scan and render Mermaid diagrams in the page after the page is loaded.

Apply formulas and flowcharts in 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$公式内容$For example, encapsulate.$E=mc^2$.
  • Block-level formula (block math):Use$$公式内容$$Wraps, it will take up a separate line and be 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 wrap the text definition of the flowchart withmermaid` 和`.

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

`

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

Through these settings, the content of your website 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.

Common Questions (FAQ)

1. Why is my mathematical formula or flowchart not displayed correctly?First, please check the following points:

  • Is the Markdown editor enabled?Ensure that the Markdown editor is enabled in the "Global Settings -> Content Settings" of AnQiCMS backend.
  • Have external libraries been correctly imported?Check your template file (such asbase.html) of MathJax and Mermaid.<script>or<link>Is the label complete and error-free, and is the network connection normal, so that CDN resources can be loaded correctly?
  • Is the syntax correct?The LaTeX syntax for mathematical formulas and the Mermaid syntax for flowcharts both have strict rules. Any minor spelling or formatting errors can lead to rendering failure.

2. Can I customize the style of mathematical formulas or flowcharts?Of course, you can.For mathematical formulas, MathJax allows you to adjust the style through configuration or CSS.mermaid.initialize()传入themeSet 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 by using custom CSS.

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