Today, with the increasing richness of content creation, plain text is no longer sufficient to express complex concepts.Whether it is complex mathematical formulas in academic articles or clear process diagrams in project management, being able to present them intuitively on the web page will undoubtedly greatly enhance the professionalism and user experience of the content.autoCMS (AnQiCMS) fully understands this requirement, through the built-in Markdown editor and flexible frontend configuration, allowing you to easily implement these advanced content displays.

This article will introduce how to enable Markdown editor in AnQiCMS and ensure that mathematical formulas and flowcharts can be displayed correctly.

Enable Markdown Editor

Firstly, to enable Markdown syntax support in your content editing area, you need to perform simple backend settings.

In the AnQiCMS backend management interface, find and enter the "Content Settings" page under "Global SettingsOn this page, you will see an option that says "Enable Markdown editor".Check this option to enable Markdown editor and save your changes.

Enable this option, and the editor will display documents in Markdown mode when you create or edit them, allowing you to create content directly using Markdown syntax.

Insert mathematical formulas and flowcharts in the content

Markdown editor enabled, you can write mathematical formulas and flowcharts in the document content.AnQiCMS supports widely-used LaTeX syntax to express mathematical formulas, as well as Mermaid syntax to draw flowcharts.

  • Mathematical formula:You can use the single dollar sign$...$Enclose inline formulas, such as$\sum_{i=1}^n i = \frac{n(n+1)}{2}$. For block-level formulas displayed independently, use double dollar signs$$...$$to wrap, for example:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
  • Flowchart:The drawing of flowcharts relies on Mermaid syntax. You just need to use specificmermaidcode blocks:
graph TD
    A[Start] --> B{Decision};
    B -- Yes --> C[Perform Operation 1];
    C --> D[End];
    B -- No --> E[Perform Operation 2];
    E --> D;

After saving the document, although these Markdown contents already exist in the database, to ensure they are rendered correctly as visual formulas and charts on the website front-end pages, some configuration of the front-end template is required.

Configure the front-end template to display correctly

Correctly displays mathematical formulas and flowcharts, mainly depending on the introduction of the corresponding third-party JavaScript libraries and CSS styles in the front-end page.These libraries will parse the specific syntax in Markdown content and render it as beautiful graphics or formulas.base.htmlOr similar templates responsible for the basic structure of the page.

AnQiCMS provides a convenient way to introduce these resources:

  1. Apply styles to Markdown content (optional)To make the rendered content of Markdown more readable on the front end, for example in the style of GitHub, you can introduce a CSS stylesheet. Add the following code to yourbase.htmlthe file<head>Inside 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" />

    This CSS file will provide a unified and beautiful style for the elements rendered by Markdown (such as headings, lists, code blocks, etc.).

  2. 正确显示数学公式The rendering of mathematical formulas is usually implemented through the MathJax library. Add the following code to yourbase.htmlthe file<head>Inside the tag:

    <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 script, which will automatically scan LaTeX mathematical formulas on the page and render them into high-quality layouts.

  3. 正确显示流程图The rendering of flowcharts requires the Mermaid library. Add the following code to yourbase.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 script will load the Mermaid library and initialize it,startOnLoad: trueParameters ensure that Mermaid automatically finds and renders all flowchart code blocks after the page is fully loaded.

  4. Render Markdown when outputting contentThis is the most critical step. When you call the content field of an article, category, or single page in the template (usuallyContentWhen the field is (auto), AnQiCMS defaults to outputting the original Markdown text.In order for the libraries introduced by the front-end to recognize and render these Markdown contents, you need to explicitly tell AnQiCMS to convert them to HTML when outputting.

    When usingarchiveDetail/categoryDetailorpageDetailEnglish tags obtainedContentwhen you add therender=trueparameter and|safeFilter, for example:

    {% archiveDetail articleContent with name="Content" render=true %}
    {{articleContent|safe}}
    • render=trueThis parameter indicates that AnQiCMS will pre-convert Markdown content to HTML on the backend in English.
    • |safeThis filter prevents the template engine from escaping HTML code twice, ensuring that the converted HTML can be correctly parsed by the browser.

    By following the above steps, the Markdown content you created in AnQiCMS containing mathematical formulas and flowcharts can be perfectly displayed on the website's front page.

Summary

AnQiCMS by providing Markdown editor support, combined with the flexible template configuration capabilities of the front-end, makes it very easy to display a rich variety of content on the website.From enabling the editor to introducing the necessary third-party libraries, to rendering the content correctly in the template, every step is designed to help you build professional and expressive websites efficiently.

Common Questions (FAQ)

1.Why did I enable the Markdown editor, write mathematical formulas and flowcharts in the content, but the front-end page still displays the original Markdown code?This is usually because you haven't properly instructed AnQiCMS to render Markdown content in your frontend template. Please check your template file (such asdetail.html), to ensure that the call toContentField was addedrender=trueparameters with|safeFilter, for example:{{archiveContent|render|safe}}.

2. Can I replace the CDN links of MathJax and Mermaid with self-built services to improve loading speed or deal with unstable CDN situations?Absolutely.The CDN link provided in the document is just a convenient example for quick deployment.base.htmlof<script>and<link>TagssrcorhrefProperty points to your local file path.

3. Besides the article content, can the category page and single page also use the Markdown editor and these advanced features?Yes. AnQiCMS's category details (categoryDetail) and single page details (pageDetail) tags are also supported,Contentand the field can also be added through render=trueParameters to render Markdown content.This means you can use Markdown syntax in places like category descriptions, single-page introductions, etc., including mathematical formulas and flowcharts.