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 to converting it into beautiful HTML for display on the website front end.The core of this conversion process is a very important parameter that we might use in template tagsrender.

UnderstandingrenderParameter: Bridge from Markdown to HTML

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 when fetching content details, such asarchiveDetail/pageDetail/categoryDetailandtagDetailThe label getsContentfield.

When you enable the Markdown editor in the AnQiCMS backend, the system will intelligently recognize the Markdown text you enter and automatically convert it on the front end. However, in some special cases, you may need more fine-grained control:

  • Manually trigger the conversion:render=true: Even 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 it is explicitly set in the template tagsrender=trueThe system will perform the Markdown to HTML conversion for this content. This provides the possibility of compatibility handling for old content or manual rendering of special content.
  • Prevent conversion:render=falseOn the contrary, if you do not want certain Markdown content to be converted to HTML, but instead want to display the original Markdown text, you can setrender=falseThis is very useful in displaying Markdown syntax tutorials, code snippets, or scenarios where the original format needs to be preserved.

For example, on the article detail page, if you want to ensure that the article contentContentis 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,renderParameters provide powerful flexibility, allowing content to be presented in the most suitable way in different scenarios.

AnQiCMS includes general features supported by Markdown.

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

  • Title Level：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.
  • ListWhether it is an unordered list (using-or*) or an ordered list (using numbers and.), it can present information in an orderly manner.
  • Block quote: Pass>Symbol, you can easily insert a quote or highlight specific content.
  • Code display: Supports inline code (`code`) and multi-line code blocks (using``` ``), which is particularly important for technical articles.
  • Links and images:[链接文本](URL)And is the cornerstone for building rich content.
  • Table: You can draw a neat table with simple symbols, convenient for data display.
  • Horizontal line: Use.---or***Insert a horizontal line to separate content paragraphs.

These basic syntax features do not require additional configuration, as long as the Markdown editor is enabled in the background and set in the front-end template.render=true(or default automatic rendering), it can be parsed and converted to HTML by AnQiCMS's built-in renderer.

Advanced applications of mathematical formulas and flowcharts: expanded features.

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

  • a mathematical formula: If you need to insert complex mathematical expressions in the content, AnQiCMS allows you to use LaTeX syntax directly. For example, in-line formulas can be written as$E=mc^2$Block-level formulas are used$$ \sum_{i=1}^{n} x_i $$.
  • FlowchartFor scenarios that require a clear display of logic flow or system architecture, the Mermaid syntax is integrated.You can directly write Mermaid code in Markdown to generate beautiful flowcharts, sequence diagrams, Gantt charts, and more.

However, it should be noted that these advanced features are not ready-to-use on the front endNot out-of-the-box usageThey require a specific third-party JavaScript library to render correctly.This means that even if you correctly input a Markdown-formatted mathematical formula or Mermaid code in the background, if the front-end template does not include the corresponding library file, what you see on the page will still be the original Markdown code.

For example, to display mathematical formulas correctly on the front end, you may need to include the MathJax library in the template:<head>To render flowcharts, you need to include the Mermaid library:<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>To render diagrams, 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 is usually under the template directorybase.htmlThis general header file is configured 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 make simple settings in the background first:

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

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

ByrenderFine-tuning of parameters, comprehensive support for basic and advanced Markdown syntax, AnQiCMS provides a powerful toolkit for content creators, helping you express your thoughts more efficiently and professionally, enhancing the attractiveness and professionalism of website content.

Frequently Asked Questions (FAQ)

Q1: Why did I enable the Markdown editor on the AnQiCMS backend, and wrote the content in Markdown, but the front-end page still displays the original Markdown text without converting it to HTML?

A1: This is likely because your frontend template did not correctly indicate the system to perform Markdown to HTML conversion. Please check your template file (for examplearchiveDetail.html/pageDetail.htmlEnsure that it is obtained,Contentthe label of the field was added to,render=truefor 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: Why does the Markdown content show math formulas or flowcharts normally in the background editor, but only shows a lot of code on the front page?

A2: Mathematical formulas (LaTeX) and flowcharts (Mermaid) are advanced Markdown features supported by AnQiCMS, but they require the inclusion of additional JavaScript libraries on the front-end to be rendered correctly. Make sure you have followed the instructions in the documentation, in the website template's<head>part (usuallybase.html）Introduction of CDN links for MathJax (used for mathematical formulas) and Mermaid (used for flowcharts).If these JS libraries are not loaded, the browser will not be able to parse these special Markdown syntaxes, thereby displaying the original code.

Q3:render=falseWhat are the practical application scenarios of the parameter? When will I use it?

A3:render=falseThe main 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. Display 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 most original, uninterpreted form.
  3. Debugging or content reviewDuring the development or content review phase, you may need to view the original Markdown format of the content to ensure its correctness or make format adjustments.