How to display Markdown formatted article content in AnQiCMS template and render it correctly to HTML?
In content management systems, Markdown has become the preferred writing format for many content creators, it is concise, efficient, and easy to convert to structured HTML.For AnQiCMS users, using Markdown to write articles can not only improve writing efficiency, but also better organize content structure.Luckyly, AnQiCMS deeply supports Markdown formatted article content and provides a perfect mechanism to ensure they are correctly rendered into beautiful HTML pages on the website front-end.
Enable Markdown editor feature
To fully utilize the advantages of Markdown in AnQiCMS, you first need to enable the corresponding editor feature in the background. This step is very intuitive and ensures that the system recognizes and processes Markdown syntax when saving content:
- Log in to your AnQiCMS backend.
- Go to the left menu in.
全局设置and then click内容设置. - In the content settings page, find and enable
Markdown编辑器Option. After enabling this feature, you can choose to use the Markdown editor to write content when publishing or editing articles.
Display and render Markdown content in the template
After 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.
Generally, we would usearchiveDetailTags to get the detailed content of the article, whereContentThe field contains the main content of the article 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.You just need to call it like this in the template:
<div>{{ archiveContent|safe }}</div>
HerearchiveContentIs the one you get througharchiveDetailTags (for example{% archiveDetail archiveContent with name="Content" %}The article content variable obtained by|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 there is no|safeYour Markdown converted HTML tags (such as<p>,<h1>etc.) may be output as-is, rather than being parsed by the browser into actual page structure.
In addition, AnQiCMS also provides finer control. You can specify whether torendermanually via parameters.ContentField performs Markdown to HTML conversion:
<div>文档内容：{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>
Whenrenderis set totrueThe system will perform the conversion when set tofalseIt will not. This is very useful in certain special scenarios, such as when you want to process Markdown content yourself or only display the original Markdown text.
Further beautify: Display of mathematical formulas and flowcharts
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 JavaScript library on the front end.You need to be in your template file (usuallybase.htmlIntroduce the corresponding resources from or in the other public header files.
Apply Markdown default style (optional but recommended):To make the rendered Markdown content more readable, you can introduce a preset CSS style library, such as the GitHub style Markdown. This will make your articles 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" />Proper display of mathematical formulas:We can use the MathJax library to render mathematical formulas. In your
base.htmlin the file<head>the tag the followingscriptTags:<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>This, the LaTeX format mathematical formula you write in Markdown (such as
$$E=mc^2$$or$a^2 + b^2 = c^2$) can be correctly parsed and displayed on the page.Correctly display the flowchart:The rendering of flowcharts can rely on the Mermaid library. Similarly, in your
base.htmlIntroduce the following JavaScript code in the file, make sure 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>After introducing Mermaid, you can use Mermaid syntax in Markdown (for example:
graph TD; A[Start] --> B{Decision}; B -- Yes --> C[Perform action]; B -- No --> D[End];It can be dynamically rendered into a graphic.
Tip
- Ensure that the background settings are enabled:Whether it is the basic Markdown rendering or the advanced formula/process chart, please confirm that you have set it up in the AnQiCMS backend
全局设置-u003e内容设置Markdown editor is enabled in Chinese. - Do not forget
|safeFilter:Always remember to add when outputting the converted HTML content of Markdown in the template.|safeFilter to avoid HTML tags from being escaped, ensuring correct content display. - Style beautification:Introduction
github-markdown-cssThis style library can significantly improve the visual presentation effect 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.By simple backend settings and template adjustments, you can easily display Markdown articles and dynamically present complex mathematical formulas and flowcharts on your website, greatly enriching the content presentation and user experience.
Frequently Asked Questions (FAQ)
**Q1: Why is my