In the digital age, the efficiency of content creation and publishing is the key to the success of a website.Markdown as a lightweight markup language, with its concise and efficient features, is increasingly favored by content creators.AnQiCMS knows this need, provides excellent Markdown support to users, making content creation more convenient, while ensuring that the web page presents a beautiful and clear structure.

To make Markdown-formatted content display correctly on your AnQiCMS website, you mainly need to complete the following steps: first, enable the Markdown editor in the background; second, correctly call and render the content in the template; finally, according to the requirements, introduce the necessary CSS styles and JavaScript libraries to support richer display effects, such as mathematical formulas and flowcharts.

Enable Markdown Editor

The starting point of everything lies in the AnQiCMS backend settings.Firstly, you need to log in to the AnQiCMS backend management interface.In the sidebar navigation, find and click "Global SettingsOn this page, you will see an option related to the editor selection.Please make sure you have checked or enabled the Markdown editor.Turn on this feature, and when you create or edit articles, pages, and other content in "Content Management", you can directly use Markdown syntax for creation.AnQiCMS in receiving Markdown format content, will automatically perform preliminary parsing.

Render Markdown content in the template

The content is stored in Markdown format in the background and needs to be correctly converted to HTML and displayed in the frontend template.AnQiCMS的模板系统（similar to Django template engine）in the default case, will automatically parse the content output by the Markdown editor into HTML.

When you call the article content field in the template file (such asdetail.html), for example{% archiveDetail articleContent with name="Content" %}, and output it as{{articleContent|safe}}Here, the key is to use|safeFilter.|safeThe filter informs the template engine that this content is safe HTML code and does not require further escaping.So, the HTML tags converted from Markdown can be correctly identified and rendered by the browser.

If your content is not from the default Markdown editor (such as Markdown text stored in custom fields), or if you want to have more explicit control over the Markdown rendering process, you can use|rendera filter. For example,{{your_markdown_variable|render|safe}}. This|renderThe filter will explicitly indicate that AnQiCMS will convert the specified Markdown text to HTML, then|safeEnsure that it is safely output as HTML to the page.

Optimize the display style of Markdown content

Although AnQiCMS will automatically convert Markdown to HTML, the default browser styles may not meet your requirements for the beauty of the content.To make the Markdown content display better visual effects on the web page, you can introduce a dedicated CSS stylesheet.An English translation of the value is: An English translation of the value is: A common practice is to use open-source style libraries like GitHub-Markdown-CSS, which can provide a set of simple and professional default styles for your Markdown content.

You can add the following CSS reference in the<head>CSS reference within the

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

Suggest adding this code to your website template'sbase.htmlThe content in the file. As such, all pages of your website can inherit this Markdown style, making your Markdown content look more unified and professional.

Supports advanced features such as mathematical formulas and flowcharts

For websites related to science and technology or data analysis, it may be necessary to display mathematical formulas or complex flowcharts.AnQiCMS also takes these advanced requirements into account and allows for the implementation through integration with third-party JavaScript libraries.

Render mathematical formulas (MathJax)

If you need to display LaTeX-formatted mathematical formulas in Markdown content, you can integrate MathJax. Similarly inbase.htmlof<head>add the following script in the tag.

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

After adding, the mathematical formulas (such as$$E=mc^2$$) you write in Markdown can be correctly parsed and rendered by MathJax.

Render flowcharts (Mermaid)

If your content includes flowcharts, sequence diagrams, and other charts, Mermaid is a powerful tool.By introducing the Mermaid library, you can directly draw charts in Markdown using concise text syntax.base.htmlof<head>Label within, add the following script:

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

After completing this step, you can use Mermaid syntax in Markdown content to create various charts, which will be dynamically rendered as SVG graphics by the Mermaid library.

Summary

Through the above steps, you can easily achieve correct rendering and display of Markdown formatted content in AnQiCMS. From enabling the backend editor, to applying in the frontend template|safe(or}|render|safe

Common Questions and Answers (FAQ)

Q1: I have written the content in Markdown in the background, but the front-end displays the original Markdown text instead of HTML, why is that?

A1:This situation usually occurs because you did not use Markdown content when outputting in the template|safeFilter.AnQiCMS's template engine defaults to escaping all output content for security reasons to prevent XSS attacks.When the HTML content converted from Markdown is escaped, it will be displayed in its original text form.{{archiveContent|safe}}where,archiveContentIt is your Markdown content variable.

Q2: I have followed the steps to enable Markdown, and also included the script for MathJax or Mermaid, but the mathematical formulas and flow charts still do not display correctly. How should I troubleshoot?

A2:Ensure that your JavaScript and CSS references are placed inbase.htmlthe file<head>Label inside, and the path is correct.其次，check whether the syntax of the mathematical formulas or flowcharts you write in Markdown is correct, MathJax and Mermaid have strict syntax requirements.You can try testing your Markdown code in online editors that support these libraries to see if it renders correctly.Also, check the browser console (F12) for any error messages, which usually indicate where the problem is.Ensure that the network connection is normal, CDN resources can be loaded.

Q3: Can I customize the display style of Markdown content instead of using GitHub-Markdown-CSS?

A3:Of course, you can.GitHub-Markdown-CSS is a convenient choice that provides basic beautiful styles.If you have specific requirements for the visual style of the website, you can definitely write your own CSS styles to override or replace it.custom.cssFile, and link it to yourbase.htmlIn it, define<h1>to<h6>/<p>/<ul>/<ol>/<table>The HTML tag styles corresponding to Markdown elements.To ensure that your custom style takes effect, you can place the link to your CSS after GitHub-Markdown-CSS, or use a more specific CSS selector to increase the priority.