Enable Markdown editor feature

To make full use of the advantages of Markdown in AnQiCMS, you first need to enable the corresponding editor function in the background. This step is very intuitive and ensures that the system can recognize and process Markdown syntax when saving content.

  1. Log in to your AnQiCMS admin panel.
  2. Go to the menu on the left.全局设置, and then click.内容设置.
  3. On the content settings page, find and enable.Markdown编辑器Options. Once this feature is enabled, you can choose to use the Markdown editor to compose content when publishing or editing articles.

Display and render Markdown content in the template

When your article content is saved in Markdown format to AnQiCMS, the next step is to display them in the front-end template.AnQiCMS's template system is based on a syntax similar to Django, which is very flexible.

Usually, we will usearchiveDetailtags to get the detailed content of the article, whereContentThe field contains the main body of the article you have written in Markdown.In most cases, if you have already enabled the Markdown editor in the background, the system will automatically convert Markdown content to HTML when outputting to the front-end.

<div>{{ archiveContent|safe }}</div>

Here are thearchiveContentis the one you pass througharchiveDetailLabel (for example){% archiveDetail archiveContent with name="Content" %}The article content variable obtained,|safeThe filter is crucial here. Its role is to inform the template engine that this content is safe HTML code and does not require additional escaping. If it does not have|safe，Your Markdown converted HTML tags (such as<p>,<h1>) may be output as is, rather than being parsed by the browser into actual page structure.

In addition, AnQiCMS also provides more fine-grained control. You can specify whether torenderparameters manually specify whether toContentField performs Markdown to HTML conversion:

<div>文档内容：{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>

WhenrendersettrueThe system will perform the conversion when set to:falseIt will not. This is very useful in some special scenarios, such as when you want to handle Markdown content yourself or only display the original Markdown text.

Further beautification: Display of mathematical formulas and flow charts

In addition to basic Markdown text rendering, AnQiCMS also supports embedding mathematical formulas and flowcharts in articles, which is particularly useful for technical or academic content.However, the correct display of these advanced features requires the use of a frontend JavaScript library.base.htmlor import the corresponding resources from the corresponding public header files)。“

  1. Apply Markdown default style (optional but recommended):To ensure that the rendered Markdown content is readable, you can introduce a predefined CSS style library, such as the GitHub style Markdown style. This will make your article look more professional:

    <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. Correctly display mathematical formulas:For mathematical formulas, we can use the MathJax library for rendering. In yourbase.htmlin the file<head>tag, add the followingscriptTags:

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

    So, the LaTeX format mathematical formula (such as$$E=mc^2$$or$a^2 + b^2 = c^2$) you write in Markdown can be correctly parsed and displayed on the page.

  3. Correct display of flowcharts:The rendering of the flowchart can rely on the Mermaid library. Similarly, in yourbase.htmlFile the following JavaScript code in the document to ensure it initializes when the page loads:

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

    Introduce Mermaid, and then you can use Mermaid syntax in Markdown (for example,

    graph TD;
    A[Start] --> B{Decision};
    B -- Yes --> C[Perform action];
    B -- No --> D[End];

    ）can be dynamically rendered into graphics.

Tips

  • Ensure that the background settings are turned on:Whether it is basic Markdown rendering or advanced formulas/process diagrams, please confirm that you have set it in the AnQiCMS backend全局设置-内容设置auto enabled Markdown editor.
  • Don't forget.|safeFilter:When outputting the HTML content converted from Markdown in the template, always remember to add.|safeFilter to avoid HTML tags from being escaped, ensuring content is displayed correctly.
  • [en] Style beautification:Introductiongithub-markdown-cssThis style library can significantly enhance the visual presentation of Markdown content, making it more professional and enjoyable to read.

AnQiCMS supports built-in Markdown editor and flexible template rendering mechanism, allowing content creators to manage and publish content more efficiently and intuitively.Through simple backend settings and template adjustments, you can not only easily display Markdown articles, but also dynamically present complex mathematical formulas and flowcharts on your website, greatly enriching the content expression and user experience.

Common Questions (FAQ)

**Q1: Why is my