Security CMS is favored by many users for its high efficiency and flexibility.In content creation, Markdown format has become the preferred choice for many content creators due to its simplicity and efficiency.But how to elegantly present these Markdown-formatted contents as structured HTML on the website front-end is a concern for many users.renderFilter, and how to flexibly use it in templates to perfectly convert Markdown content to HTML, making your website content display even better.

Enable Markdown support, prepare for rendering

When usingrenderBefore the filter, you need to ensure that the CMS has enabled the Markdown editor.This setting is very simple, just log in to the background management interface of AnQi CMS, and find the 'Content Settings' option under 'Global Settings'.Here, you will see a toggle switch to enable the Markdown editor.Open it, so the system can recognize and process your Markdown formatted content.Turn on this feature and you can directly use Markdown syntax to create when publishing or editing articles. The system backend will automatically store it in Markdown format.

renderFilter: Bridge between Markdown and HTML

Anqi CMS'srenderThe filter is a very practical tool, its core function is to convert Markdown formatted text content into HTML code that browsers can recognize.This means you can easily format using Markdown in the background, while visitors will see a beautiful and well-structured HTML page on the front end.

The advantage of this filter lies in its flexibility. Regardless of where your Markdown content is stored, whether it's in the article body, custom fields, or any other variable,renderFilters can easily handle, convert them to HTML as needed.English, in order to avoid security issues such as XSS (cross-site scripting attacks), the HTML content converted from Markdown is usually escaped by default by the system.safeFilter, explicitly tells the template engine that this content is safe and can be parsed as HTML directly.

Used in the templaterenderFilter

In the template system of AnQi CMS,renderFilter has two main usage methods: directly applied to a variable, and passed as a parameter to the tag.

  1. Used as a variable filterThis is the most direct way. When you obtain text content in Markdown format from a database or elsewhere and store it in a variable, you can directly apply it to that variable.renderFilter. For example, if you have a custom multi-line text field namedintroductionThe custom field, which contains Markdown content, can be rendered in the template like this:

    {% archiveDetail introduction with name="introduction" %}
{{ introduction|render|safe }}

    Here,introductionVariables are first defined as:renderFilter processing, converting Markdown syntax to HTML,safeThe filter ensures that these HTML codes are not escaped and are presented on the page in a parseable HTML format.

  2. Used as a tag attributein many content display tags of AnQi CMS (such asarchiveDetailused for document details,pageDetailused for single page details,tagDetailused for tag details),Contentprovided for the content field)}]renderParameter. This parameter allows you to control whether to convert Markdown content to HTML directly while fetching the content.

    • Default behaviorWhen the Markdown editor is enabled, these tags will be automatically converted from Markdown to HTML.ContentThe fields will usually be automatically converted from Markdown to HTML.
    • Manual control：If you need to explicitly control the conversion behavior, you can do so by settingrender=trueforced conversion, orrender=falseto prevent the conversion.

    For example, when displaying the document text:

    {# 默认行为下，如果Markdown编辑器已开启，Content会默认渲染 #}
<div>文档内容：{% archiveDetail with name="Content" %}{{archive.Content|safe}}</div>


{# 强制进行Markdown到HTML的转换 #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>


{# 明确不进行Markdown到HTML的转换（此时会显示原始Markdown文本） #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent}}</div>

    The convenience of this method is that you can directly specify the rendering logic within the tag, without needing to filter the variable again externally.

    It is worth mentioning that,renderParameters can be withlazyParameters (used for lazy loading of images) are used together to handle the loading and Markdown rendering of images in the content.

Enhance the display effect of Markdown content.

AlthoughrenderThe filter can convert Markdown to HTML, but for better visual effects and functional experience, you can also combine third-party libraries to enhance the rendered content. The Anqi CMS itself supports integrating these features, and you can inbase.htmlIn the general template file, introduce the corresponding CSS and JavaScript:

  • GitHub style: Introducegithub-markdown-cssThe library can provide clear and professional GitHub style formatting for rendered Markdown content.
  • Support for mathematical formulas: Through integrationMathJaxYou can write complex mathematical formulas in Markdown and get beautiful rendering on the front end.
  • Flowcharts and charts:MermaidThis allows you to directly draw flowcharts, sequence diagrams, and more in Markdown and display them dynamically on the page.

This additional integration will greatly enrich the expressiveness of your Markdown content, making it not just plain text, but also interactive and informative.

Summary

Anqi CMS'srenderThe filter provides content creators with an efficient and secure solution to convert Markdown content to HTML.It greatly simplifies the frontend display of Markdown content, whether through direct filtering of variables or specifying in tag parameters.safeIntegration with filters and some front-end libraries, you can completely