In modern website content creation, Markdown is favored by content creators for its concise and efficient features.However, for websites that need to present complex information, such as mathematical formulas and flowcharts, how to seamlessly insert them into Markdown editors and ensure they display normally on the front end is often a challenge faced by content operators.Auto CMS (AutoCMS) understands this need, and through flexible configuration and standardized introduction methods, makes these complex elements also present elegantly on your website.

Ensure that the mathematical formulas and flowcharts you insert in the AnQiCMS Markdown editor display normally on the front end, which mainly involves two core steps: first, enable the system's Markdown editor feature, and second, introduce the necessary third-party rendering libraries in the front-end template.

Enable the built-in Markdown editor of the system

AnQiCMS provides a powerful Markdown editor. To use it, you need to make simple settings in the background.This step is basic, it ensures that you can use Markdown syntax while editing content, including specific tags for mathematical formulas and flowcharts.

You only need to log in to the backend management interface of AnQiCMS, navigate to 'Global Settings', and then click the 'Content Settings' option.Here, you will find an option to "enable Markdown editor".Select this option and save the settings, and you can use the Markdown editor when creating or editing documents.Enabled, the system will recognize Markdown syntax when you save content. However, to present these complex mathematical formulas and flowcharts visually to visitors, the cooperation of front-end templates is still required.

Configure the front-end template to support advanced rendering

Markdown content converted to HTML cannot be directly understood and rendered by the browser for mathematical formulas (such as LaTeX syntax) or flowcharts (such as Mermaid syntax).Therefore, we need to use a dedicated JavaScript library to complete this rendering task.AnQiCMS uses mature industry solutions and provides clear integration guidance.base.htmlthe file<head>Some are in progress, so that they are available on all pages.

1. Optimize the display style of Markdown content

To make the converted Markdown content more readable and aesthetically pleasing, it is recommended to introducegithub-markdown-css.This CSS library can render your Markdown content in a concise GitHub-style, making elements such as code blocks, lists, quotes, and others look more professional.

In yourbase.htmlthe file<head>tags, add the following code inside:

<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 way, your Markdown content will display with a unified and beautiful style.

2. Elegant rendering of mathematical formulas

For rendering mathematical formulas, AnQiCMS recommends using MathJax.MathJax is a powerful JavaScript rendering engine that can display mathematical symbols represented by LaTeX, MathML, or AsciiMath.It can present complex mathematical expressions in high quality on web pages.

Similarly,base.htmlthe file<head>Label inside, add the following script reference:

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

This code will asynchronously load the MathJax library and automatically scan and render all mathematical formulas that conform to the MathJax syntax when the page is fully loaded. For example, you can write formulas in Markdown like this: $$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$，it will be rendered into a clear mathematical expression by MathJax.

3. Dynamic presentation of flowcharts

The rendering of flowcharts can rely on the Mermaid library.Mermaid allows you to define various charts using simple text and code, including flowcharts, sequence diagrams, Gantt charts, and so on, and then dynamically render them into SVG graphics.This is an extremely convenient feature for documents that require a direct display of business processes or system architectures.

Please add the following code tobase.htmlthe file<head>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 loads the Mermaid library using the ES module method and initializes it when the page is loaded.startOnLoad: trueThe parameter tells Mermaid to automatically find and render all diagram definitions when the page is loaded. You can define a simple flowchart in Markdown like this:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

`

Through these three simple steps, your AnQiCMS website will be able to perfectly support the insertion of mathematical formulas and flowcharts in Markdown, greatly enriching the expression and professionalism of the content.

Content writing and publishing

Once these configurations are completed, you can freely create documents containing mathematical formulas and flowcharts using the Markdown editor in the AnQiCMS backend.When editing, input content according to the grammar specifications of MathJax and Mermaid respectively.AnQiCMS will parse and store the content after saving.archiveDetailTags (especially for)ContentField rendering content when the introduced JavaScript library automatically intervenes, converting text formulas and chart definitions into exquisite visual elements.

In summary, AnQiCMS makes complex mathematical formulas and flowcharts easily accessible by providing flexible backend configurations and standardized frontend introduction methods.With just a few simple steps, your website content can leap to life, presenting itself in a richer, more professional manner to visitors.

Common Questions (FAQ)

1. Why can't the mathematical formula or flow chart be displayed even though I followed the steps?First, please check the following points:

  • Is the Markdown editor enabled?Ensure that the Markdown editor function is checked and saved in the "Global Settings" -> "Content Settings" of AnQiCMS backend.
  • Is the front-end CDN resource accessible?Check your network environment and confirmcdnjs.cloudflare.comandcdn.jsdelivr.netThese two CDN services can be accessed normally. Sometimes network restrictions can cause resource loading to fail.
  • base.htmlFile modified correctly:Carefully check what you havebase.htmladded to the filelinkandscripttags, make sure the code has no spelling errors, and is located<head>Inside the tag.
  • Browser cache:After front-end modification, the browser may load the old cache file. Please try to clear the browser cache or access the page in incognito mode.

2. Besides mathematical formulas and flowcharts, what advanced features does AnQiCMS's Markdown editor support in English?AnQiCMS's Markdown editor supports the core features of Markdown syntax, such as:

  • Title: #to######
  • List:Ordered list (1.) and unordered list (-or*)
  • Code block:Three backticks (`) wrapped code, supports syntax highlighting.
  • Table:Simple Markdown table syntax.
  • Links and images: [文本](链接)and “
  • Citation: >symbol. Combinedgithub-markdown-cssThese elements' display effects will be enhanced.

3. Can I customize the display styles of these formulas and flowcharts?Yes, you can usually customize their display styles.

  • Markdown overall style:You can modify or override:github-markdown-cssThe CSS rules to adjust the display effects of most Markdown elements.Since it is an external CSS file, you can include your own custom CSS file and use the CSS cascading to override the default styles.
  • Mathematical formula (MathJax):MathJax provides a rich set of configuration options, you can configure it with JavaScript code after introducing the MathJax script, such as adjusting fonts, colors, rendering modes, etc.The specific configuration method can be referred to in the official MathJax documentation.
  • Flowchart (Mermaid):Mermaid also supports configuring themes, colors, fonts, etc. through JavaScript.mermaid.initialize()In the method, you can pass more configuration parameters to customize the visual effects of the flowchart, and it is also recommended to refer to the official Mermaid documentation for details.