In AnQi Content Management System (AnQiCMS), we are committed to making content creation and display more flexible and efficient.For users accustomed to writing articles in Markdown format, we provide powerful support. It not only ensures that Markdown content is correctly rendered into HTML but also handles complex mathematical formulas and flowcharts easily, making technical documents, tutorial articles, and other content come alive.

Enable Markdown Editor: The First Step in Content Creation

To enjoy the convenience of Markdown in AnQiCMS, you first need to make a simple setting.In AnQiCMS backend, go to the 'Global Settings' under the 'Content Settings' area, and you will find an option to enable the 'Markdown Editor'.Select this option and save, then you can directly use Markdown syntax for writing when creating or editing articles.

When you write articles in the Markdown editor, such as entering Markdown text in the 'Document Content' field, AnQiCMS will automatically parse and render these Markdown syntax contents into standard HTML structures by default.This means you do not need to manually convert, the system will automatically handle most of the rendering work.

In your template file, to safely output HTML content that has been converted from Markdown to the page, you will usually use something similar{% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}such tags. Here is the|safeThe filter is crucial, it tells the template engine that this part of the content is safe HTML and does not require additional escaping processing, thus ensuring that the final rendering effect is consistent with the expectation.

If you need more fine-grained control, such as deciding whether to perform Markdown rendering in specific scenarios,archiveDetailtags also providerenderthe parameter. Set it torender=trueIt will force Markdown rendering,render=falseThen skip rendering and directly output the original Markdown text. Additionally, if you also want your custom content field to support Markdown rendering, you can directly use Markdown rendering in the template output of that field,|renderFilter, for example{{params.introduction.Value|render|safe}}.

To make the rendered Markdown content more visually appealing, especially when adhering to common coding styles or document conventions, we can place the public template file (usuallybase.html) of<head>Introduce a set of CSS style libraries, such as GitHub 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" />

Here, your Markdown article will be presented in a clear and professional style on the front end.

Elegantly display mathematical formulas

For technical articles or academic content containing complex mathematical formulas, AnQiCMS also provides excellent support.This is mainly due to the integration with the MathJax library, which is a powerful JavaScript rendering engine capable of high-quality rendering of mathematical formulas represented by LaTeX, MathML, and AsciiMath.

To display mathematical formulas correctly on the web page, you need tobase.htmlthe file<head>Area adds MathJax script reference. This is usually introduced from a CDN to ensure loading speed and stability:

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

Add this line of code and you can directly use LaTeX syntax to write mathematical formulas in Markdown content. For example, inline formulas can be used$E=mc^2$While independent block formulas use$$E=mc^2$$:

这是行内公式 $a^2 + b^2 = c^2$，非常方便。

$$
x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
$$
这是一个块级公式，显示效果更为突出。

When the page is loaded, MathJax will automatically identify and render these formulas, presenting them in the browser in a beautiful and clear manner.

Easily display flowcharts and diagrams

In addition to mathematical formulas, AnQiCMS also supports the display of visualized information such as processes and structures in scenarios that require it. This can be achieved by integrating the Mermaid.js library.Mermaid.js allows you to create various diagrams, such as flowcharts, sequence diagrams, Gantt charts, etc., using simple text and Markdown-like syntax.

Similarly, to enable this feature, you need tobase.htmlthe file<head>Add the Mermaid.js script reference to the region:

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

Then, you can draw charts in Markdown content using specific Mermaid syntax. For example, a simple flowchart can be written like this: 

```mermaid
graph TD;
    A[开始] --> B{决策?};
    B -- 是 --> C[执行操作];
    B -- 否 --> D[结束];
    C --> D;

These charts will be automatically parsed and rendered into visual SVG graphics by Mermaid.js as the page loads, greatly enhancing the expressiveness of the content.

The integration of these functions greatly improves the work efficiency of content creators, allowing complex documents, tutorials, and technical articles to be presented clearly and beautifully on AnQiCMS.Through simple backend settings and minimal template adjustments, you can bring richer interaction and visual experience to your website.

Common Questions and Answers (FAQ)

1. Why did I enable the Markdown editor but the article content is still not rendered, or the mathematical formulas/process diagrams do not display?

Firstly, make sure that the Markdown editor is enabled in the "Global Settings" > "Content Settings". Secondly, when outputting the article content in the template file, ensure that you use|safeFilter, for example{{archive.Content|safe}}If the content is a custom field, you may need to use explicitly.|render|safe.

You need to confirm for mathematical formulas and flowcharts that you are usingbase.htmlof<head>Area, the CDN reference script for MathJax and Mermaid.js has been added correctly.These scripts are key to rendering the page formulas and charts.In addition, check the browser console for any JS errors, which may prevent the normal loading and execution of these libraries.

2. English and Mermaid script should be placedbase.htmlwhere is the most suitable position?

It is usually recommended to place English and Mermaid scriptsbase.htmlthe file<head>区域内。特别是MathJax，其id="MathJax-script"属性表明它是一个需要在文档解析早期加载的脚本。将其放在<head>Ensure that these libraries are ready for rendering when the page content is loaded, to avoid issues such as 'flicker' or rendering delay.

3. If I have some custom content fields and I also want to support Markdown rendering and formula display for them, what should I do?

AnQiCMS provides a|renderFilter, manually renders any string content to Markdown. If your custom field (such as fields defined in "Other Parameters") stores Markdown text and you want to render it as HTML on the front end, you can call it in the template like this:{{archive.自定义字段名|render|safe}}If the custom field contains mathematical formulas or flowchart syntax, as long as the page'sbase.htmlThe script MathJax and Mermaid.js has been introduced, and they will also be rendered correctly.