For SafeCMS users, whether they can use Markdown format for content creation and smoothly display complex mathematical formulas and visualized flowcharts is a key factor in enhancing the expression of content.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

Firstly, content creators need to make simple settings on the Anqi CMS backend.Enter the "Global Settings" menu, find the "Content Settings" item, and enable the Markdown editor here.This step is basic, it enables the backend content editing area to recognize and process Markdown syntax.After setting up, you can directly use Markdown syntax for content writing and formatting when creating or editing documents.

Create Markdown, mathematical formulas, and flowchart content

Once the Markdown editor is enabled, when writing article or page content, you can fully utilize the advantages of Markdown, easily insert various Markdown elements including headings, lists, code blocks, image links, and more.Furthermore, for scenarios that require the demonstration 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 in standard Markdown (such as LaTeX syntax) and flowcharts (such as Mermaid syntax) in the editor, and the system can identify and internally mark them.$$\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$$And flowcharts can be written using Mermaid syntax likegraph TD; A-->B; B-->C;.

Front-end page rendering configuration

Although the background editor can recognize Markdown syntax, to display these contents 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： In order for Markdown content to have a more beautiful and unified style on the front-end page, you can introduce a general Markdown style library. This is usually done by editingbase.htmlthe file<head>To achieve this, just add a line of code, referring to asgithub-markdown-cssThis CDN resource allows the Markdown rendering effect of the page to be consistent with the GitHub style, improving 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. Math formulas are displayed correctly： For the correct display of mathematical formulas, Safe CMS recommends integratingMathJaxlibrary. Similarly, inbase.htmlthe file<head>section, add a line pointing toMathJaxCDN resources<script>Label. After the configuration is completed, mathematical formulas written in LaTeX syntax or other syntax in the document will be perfectly parsed and presented with professional formatting.

    <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.： Flowchart rendering can be facilitated byMermaidlibrary. This requiresbase.htmlto add a<script type="module">code block, and to importMermaidThe ESM module.When these settings are in place, the Mermaid flowchart syntax you edit in the background can be dynamically parsed and generated into intuitive graphics on the page, 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 the Anqi CMS provides detailed control in content rendering. When calling the template tags of document contentarchiveDetailthere is arenderparameter. Whenrender=trueWhen, the system will automatically convert Markdown content to HTML for output; whilerender=falseIf so, no conversion will be performed, and the content will be displayed in its original Markdown format.This flexibility allows template developers to decide the rendering method of the content according to specific needs, especially useful when secondary processing or specific display logic is required.

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

Common Questions (FAQ)

Q1: I have already configured according to the tutorialbase.htmlWhat are the reasons why the mathematical formulas and flow charts on the page are still displayed as code and not rendered correctly after enabling the Markdown editor?

A1: If it is correctly added inbase.htmlofMathJaxandMermaidThe script has not been rendered yet, please check the following points:

  • Script loading order:Ensure that these scripts are on the page<head>or<body>Loaded before the end, and not blocked by other scripts in error.
  • Network connection:Check if your website can be accessed normallycdnjs.cloudflare.comandcdn.jsdelivr.netCDN 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 flowcharts you write in the backend editor is correctMathJaxandMermaidstandard. For example, MathJax usually requires the use of$$...$$or$...$The formula for packaging, Mermaid flowchart isgraph TD;starts with.
  • Template content calling:Make sure you use{{archiveContent|safe}}such a method when calling article content in the template, andarchiveDetailTagsrenderparameter settingstrueor not specified (default istrue), to ensure Markdown is converted to HTML.

Q2: Besidesgithub-markdown-css, can 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 just a convenient and quick option. You can choose other open-source Markdown style libraries, just replace the corresponding CSS file link.base.htmlEnglish only. 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, for example,<p>,<h1>,<code>Adjust styles with tags.

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

A3: Normally, there will be no conflict.Markdown standard allows HTML code to be directly embedded in Markdown content.When the security 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 properly formatted, it can coexist harmoniously with the content converted from Markdown.