For AnQi CMS users, whether they can use Markdown formatting for content creation and smoothly display complex mathematical formulas and visualized flowcharts is a key consideration for enhancing content expression.It is pleasing to see that Anqi CMS indeed provides good support for these advanced content formats, and through a set of flexible configuration mechanisms, allows content creators to easily achieve this goal.

Enable Markdown Editor

First, content creators need to make simple settings in the AnQi CMS backend.Enter the "Global Settings" menu, find the "Content Settings" item, and enable the Markdown editor here.This step is fundamental, it enables the backend content editing area to recognize and process Markdown syntax.After setting up, you can directly use Markdown syntax to write and format content when creating or editing documents.

Create Markdown, mathematical formulas, and flowchart content

Once the Markdown editor is enabled, when writing articles or page content, you can fully utilize the advantages of Markdown, easily inserting various Markdown elements, including headings, lists, code blocks, image links, and more.Further, for scenarios that require the display of professional knowledge, such as mathematical formulas in academic articles or process illustrations in technical documents, AnQi CMS also supports embedding through specific Markdown syntax.You only need to write mathematical formulas (such as LaTeX syntax) and flowcharts (such as Mermaid syntax) in the editor in standard Markdown format, and the system can recognize and mark them internally.For example, a simple mathematical formula can be written as$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$And the flowchart can be written in Mermaid syntax likegraph TD; A-->B; B-->C;.

Front-end page rendering configuration

Although the backend editor can recognize Markdown syntax, to display the content correctly on the front-end page (especially mathematical formulas and flowcharts), it is necessary to introduce the corresponding JavaScript libraries and style sheets. This is usually done by modifying the public header file of the website templatebase.htmlto achieve.

  1. Markdown style rendering: To make the Markdown content on the front-end page more beautiful and unified, you can introduce a general Markdown style library. This is usually done by editingbase.htmlthe file<head>To implement the tag. Just add a line of code, referencing asgithub-markdown-cssSuch CDN resources can make the Markdown rendering effect of the page consistent with GitHub style, enhancing the reading experience.

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

  2. Mathematical formulas are displayed correctly.For the correct display of mathematical formulas, Anq CMS recommends integratingMathJaxlibrary. Similarly, inbase.htmlthe file<head>part, add a line pointing toMathJaxCDN resources.<script>Label. After configuration, mathematical formulas written in LaTeX syntax in the document will be perfectly parsed and presented with professional typesetting.

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

  3. The flowchart is displayed correctly.: The rendering of flowcharts can be assisted byMermaidlibraries. This requiresbase.htmldirectly in<script type="module">a code block to be introducedMermaidThe ESM module. Once these settings are in place, the Mermaid flowchart syntax you edit in the background can be dynamically parsed on the page and generate intuitive graphics, greatly enhancing the expressiveness of the content.

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

flexible content rendering control

It is worth mentioning that Anqi CMS also provides detailed control in content rendering. When calling the template tags of document contentarchiveDetailthere is arenderparameter. Whenrender=trueAt that time, the system will automatically convert Markdown content to HTML for output; whenrender=falseWhen, then it will not be converted, and the content will be displayed in the original Markdown text form.This flexibility allows template developers to decide the rendering method according to specific needs, especially when secondary processing or specific display logic is required.

With the above configuration, Anqi CMS users can not only enjoy the efficient writing experience brought by Markdown, but also realize the clear presentation of mathematical formulas and the intuitive expression of flowcharts in professional content display.This undoubtedly provides strong support for content types rich in complex structures such as technical articles, tutorials, and product descriptions, making information delivery more accurate and effective.

Frequently Asked Questions (FAQ)

Q1: I have configured according to the tutorial.base.htmlAnd the Markdown editor has been enabled, but the mathematical formulas and flowcharts on the page are still displayed as code, and are not rendered correctly, what could be the reason?

A1: If inbase.htmlcorrectly addedMathJaxandMermaidthe script, but the content has not been rendered, you need to check the following points:

  • Script loading order:Make sure these scripts are on the page<head>or<body>Load before ending, and not blocked by other scripts.
  • Network connection:Check if your website can be accessed normallycdnjs.cloudflare.comandcdn.jsdelivr.netWaiting for CDN services. Sometimes firewall or network issues can cause resource loading to fail.
  • Is the Markdown syntax correct:Confirm that the syntax of the mathematical formulas and flowchart grammar you have written in the background editor conforms toMathJaxandMermaidthe standard. For example, MathJax usually needs to use$$...$$or$...$Enclose the formula, the Mermaid flow chart starts withgraph TD;with.
  • Template content call:Make sure that when you call the article content in the template, you use{{archiveContent|safe}}this kind of method, andarchiveDetaillabel'srenderthe parameter totrueOr not specified (default istrue), to ensure Markdown is converted to HTML.

Q2: Besidesgithub-markdown-cssCan I use other Markdown style libraries or custom styles?

A2: Yes, you can completely replace or customize the Markdown style according to your own needs.github-markdown-cssIt is a convenient and quick option. You can choose other open-source Markdown style libraries, just replace the corresponding CSS file link tobase.htmlIt is enough. If you want to customize the style, you can directly write style rules for Markdown-generated HTML elements in the CSS file of your theme, such as for<p>,<h1>,<code>Adjust styles with tags.

Q3: If my content has both Markdown and special effects that need to be implemented through custom HTML tags, will they conflict?

A3: It usually does not conflict. The Markdown standard allows direct embedding of HTML code in Markdown content.When AnQi CMS renders Markdown content to HTML, inline HTML tags are preserved and become part of the final HTML output.Therefore, you can mix standard HTML tags in Markdown to achieve complex layouts or special interactive effects that Markdown itself cannot provide.As long as the HTML code itself is valid and formatted correctly, it can coexist harmoniously with the content converted from Markdown.