How to implement the correct rendering and style display of Markdown content in AnQi CMS template?
Markdown is favored by content creators for its concise and efficient characteristics.In AnQi CMS, using Markdown can not only quickly write content, but also through simple configuration, make these contents perfectly presented on the front-end page, including rich styles, mathematical formulas, and even flow charts.This article will introduce how to correctly render your Markdown content and have beautiful styles in the Anqi CMS template.
Enable Markdown editor
First, make sure that your security CMS system has enabled the Markdown editor.This is usually found in the 'Global Settings' in the 'Content Settings' option, then check or enable the Markdown editor.After enabling, you can choose to use Markdown format to write content when publishing or editing documents.
The Markdown content is rendered correctly in the template
The Markdown content is displayed in the template, mainly by calling the content field, such as in the article detail page.ContentField. The Anqi CMS template engine (similar to Django syntax) allows you to retrieve this content through specific tags.
Usually, you will usearchiveDetailorpageDetailUse tags to retrieve document content. For example, the following is an example of retrieving article content:
{% archiveDetail articleContent with name="Content" %}
The key is to ensure that Markdown syntax is parsed into HTML. Anqi CMS is handlingContentWhen a field is, if the background has enabled the Markdown editor, the content will be automatically converted to HTML. But to more clearly control the conversion process, you can userenderParameter.
render=trueThe content will be forced to convert Markdown to HTML, andrender=falseThis will skip this conversion and directly output the original Markdown text. To ensure the correct display of content, especially when enabling or disabling the Markdown editor, it is recommended to explicitly addrender=trueand usesafefilter to avoid HTML entity escaping:
{% archiveDetail articleContent with name="Content" render=true %}
{{articleContent|safe}}
This ensures that Markdown syntax such as headings, lists, links, etc. are correctly parsed into browser-readable HTML structure.
Add styles to Markdown content
It is not enough to convert Markdown to HTML; we also need to add beautiful styles to it.The AnQi CMS supports the use of external libraries to give your Markdown content a universal style and to display mathematical formulas and flowcharts correctly.
1. General Markdown style
To make Markdown content have professional formatting, you can introduce a ready-made CSS library.A very popular choice is GitHub-style Markdown.You can in your template file (usuallybase.htmlorbash.htmli.e., the common header file of your website) of<head>Add the following code inside the tag:
<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" />
Add this stylesheet, and your Markdown content will display in a clean, professional layout similar to GitHub. At the same time, to ensure the correct application of the style, it is recommended to add a parent HTML element that contains the Markdown contentmarkdown-bodythe class name.
**2. Math Formula Display