How to use Markdown correctly on web pages and display mathematical formulas and flow charts

The new version of Anqi CMS has added a Markdown editor, so it can support inserting mathematical formulas and flowcharts.

However, mathematical formulas and flow charts need to be supported by third-party plug-ins to be displayed normally.

The following is a description of their usage.

First, enable the Markdown editor in Anqi CMS backend->Global Settings->Content Settings

Create a new document, insert mathematical formulas and flowcharts into the document for testing and use later

Apply Markdown default style on web pages:

We use cloudflare's cdn resources. At the header of the base.html file, add the following line:

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

Correct display of mathematical formulas on web pages

We use the cdn resource of jsdelivr. At the header of the base.html file, add the following line:

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

Correct display of flowcharts on web pages

We use the cdn resource of jsdelivr. At the head of the base.html file, add the following content:

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