Content operation plays a crucial role in today's digital age.The strength of a Content Management System (CMS) largely depends on its ability to flexibly support a variety of content representations.AnQiCMS (AnQi Content Management System) boasts its high efficiency and flexibility, providing a vast space for content creators.Today, we will delve into how to elegantly enable Markdown editor on the frontend page of Anqi CMS to create content, and further realize the rendering of mathematical formulas and flowcharts, making your website content more expressive.

Enable Markdown Editor: The First Step of Content Creation

The Anqi CMS provides a rich set of options for content editing, including native support for Markdown syntax.To upgrade your content creation experience, you first need to enable the Markdown editor.This is simple, you just need to log in to the AnQi CMS backend and navigate to [Global Settings] -> [Content Settings].Find and check the option 【Enable Markdown Editor】on this page, then save the settings.

After completing this step, the content input box will automatically switch to the Markdown editor when you create or edit a document.This means you can use concise Markdown syntax to format articles, greatly enhancing content creation efficiency.Next, we will prepare for the rendering of mathematical formulas and flowcharts.

Write content that includes mathematical formulas and flowcharts

After enabling the Markdown editor, you can directly embed the code for mathematical formulas and flowcharts in the content.

ForMathematical formulaWe can use LaTeX syntax, which is a widely used markup language for scientific typesetting. For example, a classic Einstein's mass-energy equation can be expressed as:

$$ E=mc^2 $$

Inline formulas can be used like this:.$\int_0^\infty f(x) dx$.

As forFlowchart【en】The CMS supports Mermaid syntax, which allows you to quickly generate various charts through text descriptions. For example, a simple flowchart can be written like this:

```mermaid
graph TD;
    A[用户] --> B(提交表单);
    B --> C{验证数据?};
    C -- 是 --> D[处理请求];
    C -- 否 --> E(返回错误);
    D --> F(显示结果);


您可以尝试新建一篇文档，将上述数学公式和流程图的Markdown代码粘贴进去，例如在文章内容中添加一些Markdown标题、列表，以及刚才提到的数学公式和流程图代码，为后续的前端渲染做准备。

### 引入前端渲染库：让浏览器理解复杂语法

仅仅在后端保存了这些代码还不足以让它们在前端页面上美观地呈现。这是因为浏览器本身并不直接识别并渲染LaTeX数学公式或Mermaid流程图。为了实现这一目标，我们需要借助一些前端渲染库。

安企CMS的模板文件通常位于 `template/您的模板名称/` 目录下。您需要找到并编辑当前主题的公共头部文件，通常是 `base.html` 或类似的名称。将以下代码片段添加到 `<head>` 标签的内部。

首先，为了让Markdown内容有更好的显示效果，可以引入一个Markdown样式表：

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

This CSS file can provide rendering styles similar to GitHub for your Markdown content, making it look more professional and readable.

Next, in order to render mathematical formulas correctly, we need to introduce the MathJax library:

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

MathJax is a powerful JavaScript rendering engine that can parse and beautifully display mathematical markup languages such as LaTeX on web pages.asyncThe attribute ensures that it does not block the page loading.

Finally, to achieve the dynamic rendering of the flowchart, we need to introduce 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>

This code introduces the Mermaid library and uses it tomermaid.initialize({ startOnLoad: true });Indicate that Mermaid automatically scans and renders all code blocks that match the Mermaid syntax after the page is loaded.

Display content in the template: Ensure correct parsing and safety

In the template file you use to display article details (usuallyarchive/detail.htmlor a similar document details page template), you need to usearchiveDetailtags to retrieve and display Markdown-formatted content.

When the Markdown editor of AnQi CMS is enabled, a Markdown to HTML conversion is usually performed during content saving. However, during frontend rendering, in order to ensure that the content can be correctly parsed by the browser as HTML code rather than displayed as plain text, you need to use|safeFilter. In addition,archiveDetailtag in retrievingContentfields, can also be配合render=trueParameter, explicitly indicates the conversion of Markdown to HTML for the content (even if the backend has already processed it, this can also increase robustness).

Here is a sample code snippet showing the document content:

{# 假设这是您的文档详情页模板中的内容部分 #}
<div class="markdown-body"> {# 配合之前引入的github-markdown-css，为内容添加样式 #}
    {% archiveDetail articleContent with name="Content" render=true %}
    {{ articleContent|safe }}
</div>

Here,divLabel addedmarkdown-bodyThe class is designed to complement the one we introduced earlier:github-markdown-cssThe style makes the rendered Markdown content have a good visual effect.{{ articleContent|safe }}It is crucial,|safeThe filter tells the template engine that this part of the content is safe HTML code that can be output directly without character escaping, so that the HTML structure of mathematical formulas and flowcharts can be correctly rendered.

Effect verification

After completing all the configurations, please make sure to go to the security CMS backend management interface and clear the website cache under the [Update Cache] feature.Then, visit the document page you previously edited that contains mathematical formulas and flowcharts.If everything goes well, you should be able to see well-formatted Markdown content, correctly parsed mathematical formulas, and clearly presented flowcharts.

Through simple steps, the Aanqi CMS can transform static text content into an interactive and visually appealing dynamic display.This not only enhances the professionalism and attractiveness of the website content, but also brings readers a more immersive and efficient reading experience.Make full use of these functions of Anqi CMS, which will help your website stand out among a sea of content.

Common Questions (FAQ)

  1. Why did I enable the Markdown editor and add JS code, but mathematical formulas or flowcharts still don't display?This is usually caused by several reasons:
    • Cache issue:Please make sure you have cleared the cache of the Anqi CMS website and have refreshed the browser cache (Ctrl+F5 or Cmd+Shift+R).The browser may still be loading old CSS/JS files.
    • Template path error:Check if you have added the CSS and JS code correctly to the current theme:base.htmlIn the file. If your website uses sub-templates, you may need to find the actual active header file.
    • |safeFilter missing:Make sure you use when outputting article content,{{ articleContent|safe }}. If it is missing