In AnQiCMS, the flexibility of content creation has always been our focus.With the introduction of the Markdown editor, content publishing has become more efficient and convenient.When we enter Markdown format content through the backend editor, the system will default convert it to beautiful HTML for display on the website front end.render.

Understandingrender参数：Markdown to HTML bridge

renderThe parameter, as the name implies, controls whether the content should be rendered from Markdown format to HTML. It is usually used in template tags to obtain content details, such asarchiveDetail/pageDetail/categoryDetailandtagDetailTags obtained with autoContentfield.

When you enable the Markdown editor in the AnQiCMS background, the system will intelligently recognize the Markdown text you enter and automatically convert it on the front end. But in some special cases, you may need more precise control:

  • Manual trigger conversion:render=trueEven if you have not enabled the Markdown editor globally in the background, or if some content was created before the Markdown feature was enabled, as long as you explicitly set it in the template tagrender=true，The system will convert the content from Markdown to HTML. This provides the possibility for compatibility handling of old content or manual rendering of special content.
  • Prevent conversion:render=falseEnglish, instead, if you do not want certain Markdown content to be converted to HTML, but want to display the original Markdown text directly, you can setrender=falseThis is very useful in scenarios where displaying Markdown syntax, code snippets, or retaining original formatting is required.

For example, on the article detail page, if you want to ensure that the article content (Content) is rendered correctly:<div>文档内容：{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}</div>and if you want to display the original Markdown code:<div>原始Markdown：{% archiveDetail archiveContent with name="Content" render=false %}{{archiveContent|safe}}</div>

As you can see,renderThe parameter provides powerful flexibility, allowing content to be presented in the most appropriate way in different scenarios.

AnQiCMS built-in general features supported by Markdown

AnQiCMS's Markdown editor supports most standard Markdown syntax, making it very intuitive to write daily content. With these basic features, you can easily build articles that are well-structured and beautifully formatted:

  • Title Hierarchy：From Level 1 Title (#) to Level 6 Title (######), you can clearly divide the structure of the article.
  • Text Style:**粗体**/*斜体*/~~删除线~~Common styles make key content clear at a glance.
  • List: Whether it is an unordered list (using)-or*) or an ordered list (using numbers and).), it can present information in an organized manner.
  • Reference block: Through>Symbols, you can easily insert quotes or highlight specific content.
  • Code displaySupports inline code (`code`) and multi-line code blocks (using)``` ``)，for technical articles it is especially important.
  • links and images:[链接文本](URL)and” is the foundation for constructing rich content.
  • table：Simple symbols can be used to draw neat tables, convenient for data display.
  • Horizontal line: Use---or***Insert a horizontal line to separate content paragraphs.

These basic grammar features do not require additional configuration, as long as the Markdown editor is enabled in the background and the front-end template is setrender=true（or default automatic rendering），can be parsed and converted to HTML by AnQiCMS's built-in renderer.

Advanced application of mathematical formulas and flow charts.

In addition to standard Markdown, AnQiCMS also specially enhances support for some advanced content expression forms, which is a blessing for websites that need to display professional or technical content:

  • Mathematical formula：If you need to insert complex mathematical expressions in the content, AnQiCMS allows you to use LaTeX syntax directly. For example, inline formulas can be written as$E=mc^2$However, block-level formulas are used$$ \sum_{i=1}^{n} x_i $$.
  • FlowchartFor scenarios that require clear presentation of logical process or system architecture, the Mermaid syntax has been integrated.You can directly write Mermaid code in Markdown to generate beautiful flowcharts, sequence diagrams, Gantt charts, and more.

However, it is necessary to note that these advanced features are not ready-to-use on the front-end pageNot ready to use out of the box.They need to rely on specific third-party JavaScript libraries to render correctly.This means, even if you input Markdown-formatted mathematical formulas or Mermaid code correctly in the background, if the front-end template does not include the corresponding library files, you will still see the original Markdown code on the page.

For example, to display mathematical formulas correctly on the front end, you may need to include the MathJax library in the template:<head>Partly introduce the MathJax library:<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>And to render flowcharts, you need to include the Mermaid library:<script type="module">import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';mermaid.initialize({ startOnLoad: true });</script>

The introduction of these front-end resources usually occurs under the template directory,base.htmlconfiguring these common header files to ensure that all pages rendered with Markdown can be loaded correctly.

Enable Markdown feature

To use the Markdown editor and its rendering features in AnQiCMS, you need to first make simple settings in the background:

  1. Log in to the AnQiCMS backend management interface.
  2. Navigate to the 'Global Settings' under the 'Content Settings' option.
  3. Here, you will find the option to enable or disable the Markdown editor. Check it to enable.

After enabling, you can use Markdown syntax to create content in the content area when publishing or editing articles, pages, and other content. CombinedrenderThe flexible use of parameters and proper configuration of front-end libraries will enable your AnQiCMS website to present rich content and expressive professional-level pages.

PassrenderParameter fine control, as well as comprehensive support for basic and advanced Markdown syntax, AnQiCMS provides a powerful toolkit for content creators, helping you express your ideas more efficiently and professionally, and enhancing the attractiveness and professionalism of your website content.

Frequently Asked Questions (FAQ)

Q1: Why is the raw Markdown text displayed on the front page even though I have enabled the Markdown editor in the AnQiCMS backend and written the content in Markdown?

A1: This is very likely because your front-end template did not correctly indicate the system to perform Markdown to HTML conversion. Please check your template file (for examplearchiveDetail.html/pageDetail.htmlEnsure that in the retrievalContentlabel is added to the fieldrender=trueParameter, for example: {% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}. If this parameter is missing in the template, the system may not automatically trigger rendering.

Q2: I inserted mathematical formulas or flowcharts in the Markdown content, and they look normal in the backend editor, but only a mass of code is displayed on the front page. What is the reason for this?

A2: Mathematics formulas (LaTeX) and flowcharts (Mermaid) are advanced Markdown features supported by AnQiCMS, but they require the inclusion of additional JavaScript libraries on the frontend page to render correctly. Please ensure that you have followed the instructions in the documentation, in the website template's<head>Parts (usually)base.html）introduced CDN links for MathJax (for mathematical formulas) and Mermaid (for flowcharts).If these JS libraries are not loaded, the browser will not be able to parse these special Markdown syntaxes, and the original code will be displayed.

Q3:render=falseWhat practical application scenarios do parameters have? When will I use it?

A3:render=falseThe primary function of the parameter is to prevent Markdown content from being rendered as HTML and to output the original Markdown text directly. Its application scenarios include:

  1. Show Markdown syntax tutorialIf your website needs to teach users how to write Markdown, it is more meaningful to show the Markdown code directly than the rendered HTML.
  2. Share code snippetsWhen you need to display Markdown-formatted code or configuration files in an article, userender=falseThis ensures that the code is presented in its original, uninterpreted form.
  3. Debug or content reviewIn the development or content review phase, you may need to view the original Markdown format of the content to ensure its correctness or make formatting adjustments.