Today, with the increasing diversity in content creation, effectively presenting rich text content, especially professional information that includes mathematical formulas and flowcharts, has become a need for many website operators.AnQiCMS (AnQiCMS) is an efficient content management system that also takes this into full consideration.This article will delve into whether Anqi CMS supports Markdown content rendering, and how to enable and correctly display mathematical formulas and flowcharts within it, helping you easily master these advanced content formats.

Basic Markdown support and enablement in AnQi CMS

AnQi CMS is committed to providing a concise and efficient content management experience. The new version introduces a Markdown editor, which is undoubtedly a big step forward in content creation.Markdown as a lightweight markup language allows authors to focus on the content itself without having to pay too much attention to formatting, while also being able to achieve rich formatting through concise syntax.

Enabling the Markdown editor in AnQi CMS is very intuitive:

  1. Log in to your Anqi CMS backend.
  2. Navigate toGlobal Settings.
  3. ClickContent settingsOption.
  4. Here, you will find options such as 'Download remote images' and others, including the option to enable Markdown editor.Check or enable the relevant settings and your content editing interface will switch to Markdown mode.

Enable Markdown editor and you can directly use Markdown syntax to create content when publishing articles, products, or single pages. For example, using# 标题Create a first-level heading,**粗体**Bold text,- 列表项Create a list, etc.,,

Add web styles to Markdown content

Although the Anqi CMS built-in Markdown editor can parse and store Markdown formatted content, but in order to display these contents beautifully on the website front-end, especially in HTML pages, we usually need to introduce a suitable CSS stylesheet.This ensures that the HTML elements rendered by Markdown (such as headings, paragraphs, lists, code blocks, etc.) have a unified and readable visual style.

We can make use of some open-source Markdown style libraries, such asgithub-markdown-css. Apply it to your security CMS website, you need to make some modifications in the template file. Usually, you need to modify the template in the website'sbase.htmlthe file<head>Part, add a line pointing to the CDN link of the CSS file.github-markdown-cssFor example, the code is as follows:

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

Make sure to place this line of code in<head>Within the tag, so that when the browser loads the page, these styles will be applied.

Elegantly present mathematical formulas

It is crucial for scientific, educational, or technical websites to display mathematical formulas accurately and elegantly.The Anqi CMS integrates with a third-party mathematical formula rendering library, allowing LaTeX formulas in Markdown content to be perfectly presented.Here we usually use MathJax.

To correctly display mathematical formulas on your Anqi CMS website, you need tobase.htmlthe file<head>Part, add the MathJax script reference. Usually, this is done through a CDN service like jsDelivr:

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

This script will asynchronously load the MathJax library and automatically scan and render LaTeX mathematical formulas in the page content after it is loaded. In Markdown content, you can use inline formulas such as$a^2 + b^2 = c^2$And block-level formulas (such as$$\sum_{i=1}^n i = \frac{n(n+1)}{2}$$) to write your mathematical expressions.

Dynamic flowchart drawing

Flowcharts are powerful tools for expressing logical steps and system processes.AnQi CMS supports Mermaid, allowing you to directly write flowcharts, sequence diagrams, Gantt charts, and other interactive graphics in Markdown content, and dynamically generate interactive graphics on the web.

To enable the rendering of flowcharts on your Anqi CMS website, you also need tobase.htmlthe file<head>Partly adding Mermaid script references:

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

Please note that the script for importing Mermaid needs to be used heretype="module"Property.mermaid.initialize({ startOnLoad: true });This line of code ensures that Mermaid automatically searches and renders all code blocks that conform to Mermaid syntax. In Markdown content, you can use a specific syntax block to define flowcharts, for example:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

Content rendering control in the content template

It is noteworthy that the content fields of AnQi CMS (such as the content of articlesContentIn the background, it is stored in Markdown format, but when rendered on the front end, the system will decide how to handle this content according to the template settings.This means that even if you have enabled the Markdown editor in the background, if the template is not properly configured, the front-end may still display the original Markdown text.

In the template tags of AnQi CMS,archiveDetail/categoryDetail/pageDetailThe tags used to obtain detailed information about the content, which includesContentfield. To ensure that Markdown content is correctly rendered as HTML, you need to use these tags and specifyContentadd a fieldrender=truethe parameter and cooperate|safefilter.render=trueIt will instruct the system to convert Markdown content to HTML, and|safeThe filter tells the template engine that this HTML is safe, does not need to be escaped twice, and can be output directly.

For example, the code to obtain and render Markdown content on an article detail page might look like this:

{# 假设archiveContent变量通过 {% archiveDetail archiveContent with name="Content" %} 获取 #}
<div>
    {%- archiveDetail articleContent with name="Content" render=true %}
    {{articleContent|safe}}
</div>

By following these steps, your Aiqi CMS website can fully support the rendering of Markdown content, including introducing beautiful Markdown styles, displaying complex mathematical formulas, and dynamically drawing flowcharts, thereby greatly enhancing the professionalism and reading experience of the content.

Frequently Asked Questions (FAQ)

  1. Q: Why did I enable the Markdown editor in the background and input Markdown content, but the front-end page still displays the original Markdown text instead of rendered HTML?A: This is usually because your frontend template is not properly configured to render Markdown content. Please check yourbase.htmlfile to see if it includes Markdown styles (such asgithub-markdown-css）and JavaScript rendering libraries (such as MathJax and Mermaid) CDN references. More importantly, when calling the template tags in the article content (such asarchiveDetailEnsure it isContentField addedrender=trueparameters, and use|safefor example:{{ archiveContent|render|safe }}.

  2. Q: I added the CDN link and script according to the tutorial, but the mathematical formula or flowchart still does not display correctly. How should I investigate?A: First, check if your Markdown syntax is correct. MathJax and Mermaid have specific syntax requirements, such as mathematical formulas need to be used$or$$The package, the flowchart needs `mermaid

  3. Q: Will the pure HTML content I published before be affected after enabling the Markdown editor? Do I need to edit all of it again?A: Generally, enabling the Markdown editor will not directly affect the content you previously published in pure HTML format.The Anqi CMS distinguishes the storage format of content.If you choose or switch to Markdown mode while editing in the background, the system expects you to enter Markdown syntax.As long as your template can distinguish or be compatible with these two formats (for example, by checking whether the content contains Markdown tags to decide whether to render), there is no need to edit all existing content.In most cases, even when editing in Markdown mode, the system will handle it intelligently, or you can optionally convert the old content to Markdown.