After you enable the Markdown editor in the AnQiCMS background, will the front-end content be automatically rendered?The answer is affirmative, and the system also provides flexible configurations to meet your various needs.

Enable Markdown editor

First, we need to understand how to enable this feature on the AnQiCMS backend.In the AnQi CMS backend management interface, you will find a section named "Global Settings", which includes "Content Settings".Here, you can easily find and check the option to enable Markdown editor.Once this option is activated, the system will know that you wish to input and manage content in Markdown format.

The automatic rendering mechanism of front-end content

Once this feature is enabled, all the content you write in the content editing area using Markdown syntax will be automatically parsed and rendered into the corresponding HTML format on the website front end. This means that you do not need to manually write HTML tags, but focus on the concise syntax of Markdown, such as using##Use to indicate a second-level title*Create an unordered list or use**Bold text and the system will automatically convert it into HTML that is recognized and beautifully displayed in the browser when the user visits the page.

The convenience of automatic rendering greatly improves the efficiency of content creators, allowing you to focus more on the content itself rather than on the繁琐 layout work.

Handling special Markdown elements: mathematical formulas and flowcharts

It is noteworthy that the AnQiCMS Markdown editor not only supports basic syntax but also adds support for mathematical formulas and flowcharts.However, the rendering of these special elements requires the use of some third-party JavaScript libraries on the browser side.

For example, if you want to display mathematical formulas in your article, you need to use the feature on your website'sbase.html(Or your main template file) introduce the MathJax script in the header area:

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

Similarly, if you need to render a flowchart, you need to introduce the Mermaid script:

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({ startOnLoad: true });
</script>

In addition, to make the overall style of Markdown content more beautiful, you can choose to introduce GitHub-style Markdown CSS: 

<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" />

These additional scripts and style files are necessary steps to ensure that the browser can correctly parse and display these advanced Markdown elements.They usually only need to be configured once in the template, and then they will take effect on all front-end pages containing the corresponding Markdown content.

Custom rendering behavior: template tags ofrenderParameter

AnQiCMS provides high flexibility in template rendering. Even if you enable the Markdown editor in the background, you can still use template tags torenderParameters, for fine control of the rendering behavior of specific content.

For example, inarchiveDetail/categoryDetailorpageDetailused to get the details of the content tags, when you call the contentContentWhen the field is added, you can also add extrarenderParameters to specify whether to perform Markdown to HTML conversion.

  • When you setrender=trueWhen, the content will be converted to HTML (even if the Markdown editor is not enabled on the back end, this parameter can force the conversion).
  • When you setrender=falseWhen, the content will be output in the original Markdown format and will not be converted to HTML.

This is very useful in certain special cases, for example, you may want to display the original Markdown code on the front end for users to copy, rather than rendered HTML.

Example code (for document content)

{# 默认行为，如果后台启用Markdown则自动渲染，否则不渲染 #}
<div>文档内容：{% archiveDetail with name="Content" %}{{archiveContent|safe}}</div>

{# 强制进行Markdown渲染，无论后台设置如何 #}
<div>渲染后的内容：{% archiveDetail archiveContentRendered with name="Content" render=true %}{{archiveContentRendered|safe}}</div>

{# 强制不进行Markdown渲染，显示原始Markdown文本 #}
<div>原始Markdown内容：{% archiveDetail archiveContentRaw with name="Content" render=false %}{{archiveContentRaw|safe}}</div>

Through this mechanism, AnQiCMS achieves the organic combination of background configuration and front-end display, providing automation while also giving users enough space for customization.

Summary

In conclusion, after AnQiCMS enables the Markdown editor in the background, the front-end content will automatically convert Markdown to HTML, greatly simplifying the content publishing process.For advanced Markdown features such as mathematical formulas and flowcharts, it is necessary to implement client-side rendering by introducing the corresponding third-party JavaScript libraries in the front-end template.At the same time, the system also provides passing through template tags at the levelrenderThe option to customize the rendering behavior of parameters, allowing users to flexibly control the way content is displayed according to specific needs.

Frequently Asked Questions (FAQ)

  1. Q: Do I need to make additional configurations in the front-end template after enabling the Markdown editor?A: For basic Markdown syntax (such as headings, lists, bold text, etc.), once the background is enabled, the front-end will automatically render without the need for additional template configuration. However, if you want to support advanced Markdown features such as mathematical formulas or flowcharts, you will need to configure your websitebase.htmlManually introduce the corresponding third-party JavaScript libraries and CSS styles (such as MathJax and Mermaid) in the file.

  2. Q: Why did I enable the Markdown editor but the front-end content still looks like raw Markdown text?A: This may be caused by several reasons: first, please make sure that you have correctly checked and saved the 'Enable Markdown Editor' option in 'Global Settings' -> 'Content Settings'. Second, check the template tags you are calling for content details (such asarchiveDetailIs there a clear settingrender=falseParameter, this will force the system not to render Markdown.Finally, try clearing the website cache and browser cache. Sometimes, old caches can prevent new configurations from taking effect in a timely manner.

  3. Q: Where can I find more documentation and examples of AnQiCMS Markdown features?A: You can refer to the official AnQiCMS help document, especially the "Content Management" module under the "Publish Documents" and "Template Creation" sections, which will introduce the usage method, supported syntax, and how to flexibly call and render in the front-end template.The document usually also includes specific code examples to help you get started quickly.