Markdown with its concise and efficient features has become a preferred text format for content creators.In Anqi CMS, using Markdown not only allows for quick content creation but also enables perfect presentation on the frontend page through simple configuration, including rich styles, mathematical formulas, and even flowcharts.This article will introduce in detail how to make your Markdown content render correctly and have beautiful styles in the Anqi CMS template.

Enable Markdown Editor

Firstly, make sure that your security CMS system has enabled the Markdown editor.This is usually found in the 'Global Settings' under 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.

Render Markdown content correctly in the template

Display Markdown content in the template, mainly by calling the content field, for example, in the article detail pageContentField. The template engine of Anqi CMS (similar to Django syntax) allows you to retrieve this content through specific tags.

Typically, 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 how to ensure that Markdown syntax is parsed into HTML. Anqi CMS handlesContentWhen a field is selected, if the backend has enabled the Markdown editor, the content will be automatically converted to HTML. However, to have more explicit control over the conversion process, you can userenderParameter.

render=trueIt will force the conversion of content from Markdown to HTML,render=falseThen this transformation will be skipped and the original Markdown text will be output directly. To ensure the correct display of content, especially after 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, and so on are correctly parsed into HTML structures that browsers can recognize.

Add style to Markdown content

1. General Markdown style

To make Markdown content have professional formatting, you can introduce a ready-made CSS library.A very popular choice is the GitHub-style Markdown formatting.base.htmlorbash.html(i.e., the public header file of your website) of the<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" />

After adding this stylesheet, your Markdown content will present a simple and professional layout style 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 Markdown content.markdown-bodyClass name.

2. Math Formula Display