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

Enable Markdown Editor

Firstly, we need to understand how to enable this feature in the AnQiCMS backend.In the background management interface of Anqi CMS, you will find a section named "Global SettingsHere, you can easily find and check the option 'Enable Markdown Editor'.Once this option is activated, the system will know that you want to input and manage content in Markdown format.

Automatic rendering mechanism of front-end content

Once this feature is enabled, all content you write in the content editing area using Markdown syntax will be automatically parsed and rendered into the corresponding HTML format after saving and publishing. This means that you do not need to manually write HTML tags, but only focus on the concise syntax of Markdown, such as using##Represents a second-level heading, use*Create an unordered list, or use**Bold text and so on, the system will automatically convert it into an HTML that browsers can recognize and display beautifully when the user visits the page.

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

Special Markdown Elements: Handling Mathematical Formulas and Flowcharts

It is worth noting 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 client side.

For example, if you want to display mathematical formulas in your article, you need to on your websitebase.htmlThe header area of the template file introduces the MathJax script:)

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

Similarly, to render flowcharts, 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>

Additionally, to make the overall style of Markdown content more aesthetically pleasing, 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 they will take effect on all front-end pages that contain the corresponding Markdown content.

Custom rendering behavior: template tagsrenderParameters

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

For example, inarchiveDetail/categoryDetailorpageDetailTags used to obtain content details, when you call the contentContentfield, you can add extra.renderThe parameter is used to specify whether to convert Markdown to HTML.

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

This is very useful in some special scenarios, such as when you may want to display the original Markdown code on the front end for users to copy, rather than the rendered HTML.

Example code (using document content as an example):

{# 默认行为，如果后台启用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 an organic combination of background configuration and front-end display, providing automation while also giving users enough space for customization.

Summary

In summary, after enabling the Markdown editor in the AnQiCMS backend, 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 frontend template.renderParameters for customizing the content rendering options, allowing users to flexibly control the display of content according to specific needs.

Common Questions (FAQ)

  1. Q: Do I need to make additional configuration in the frontend template after enabling the Markdown editor?A: For basic Markdown syntax (such as headings, lists, bold text, etc.), once enabled on the backend, the frontend will automatically render without additional template configuration. However, if you want to support advanced Markdown features such as mathematical formulas or flowcharts, you will need to enable them on your websitebase.htmlFile manually import the corresponding third-party JavaScript library and CSS styles (for example, MathJax and Mermaid).

  2. Q: Why does the front-end content still look like raw Markdown text even though I have enabled the Markdown editor?A: This may be caused by several reasons: first, please make sure that you have correctly checked and saved the 'Enable Markdown Editor' option under 'Global Settings' -> 'Content Settings'. Second, check the template tags (such asarchiveDetail），是否有明确设置了render=falseParameter, this will force the system not to render Markdown.Finally, try to clear the website cache and browser cache. Sometimes old caches may cause new configurations not to take effect in time.

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