How to enable Markdown editor rendering content on the front-end page and display mathematical formulas and flowcharts?
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 various forms of content representation.AnQiCMS (AnQiCMS) leverages its efficient and flexible features to provide a vast space for content creators.Today, we will delve into how to elegantly enable Markdown editor to create content on the front page of Anqi CMS, and further realize the rendering of mathematical formulas and flowcharts, making your website content more expressive.
Turn on the Markdown editor: the first step in content creation
AnQi CMS provides a rich selection of content editing features, 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, navigate to 【Global Settings】->【Content Settings】.In this page, find and check the option [Enable Markdown Editor] and then save the settings.
After completing this step, when you create or edit a document, the content input box will automatically switch to the Markdown editor.This means you can use concise Markdown syntax to format your articles, greatly improving content creation efficiency.Next, we will prepare for the rendering of mathematical formulas and flowcharts.
Write content that includes mathematical formulas and flowcharts
After the Markdown editor is turned on, you can directly embed the code for mathematical formulas and flowcharts in the content.
Fora mathematical 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 follows:
$$ E=mc^2 $$
Inline formulas can be used in this way:$\int_0^\infty f(x) dx$.
As forFlowchart，AnQi 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 Markdown content with rendering styles similar to GitHub, making it look more professional and easy to read.
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 property ensures that it does not block page loading.
Finally, to achieve the dynamic rendering of flowcharts, 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 throughmermaid.initialize({ startOnLoad: true });Direct Mermaid to automatically scan and render all code blocks that conform to Mermaid syntax after the page has finished loading.
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 detail page template), you need to usearchiveDetailtags to retrieve and display Markdown formatted content.
After the Markdown editor of Anqi CMS is enabled, a conversion from Markdown to HTML is usually performed when the content is saved. However, when rendering on the front end, in order to ensure that the content is correctly parsed by the browser as HTML code rather than displayed as plain text, you need to use the output content with|safeFilter. In addition,archiveDetailtags are being retrievedContentField, it can also be配合render=trueParameter, explicitly indicates the conversion of content from Markdown to HTML (even if the backend has already processed it, this can also increase robustness).
This is a sample code snippet to demonstrate the document content:
{# 假设这是您的文档详情页模板中的内容部分 #}
<div class="markdown-body"> {# 配合之前引入的github-markdown-css，为内容添加样式 #}
{% archiveDetail articleContent with name="Content" render=true %}
{{ articleContent|safe }}
</div>
here,divAdd tagsmarkdown-bodyThe class is to match the one we introduced earliergithub-markdown-cssStyle, making the rendered Markdown content have a good visual effect.{{ articleContent|safe }}Is critical,|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 rendered correctly.
Effect verification
After completing all the above configurations, please be sure to go to the update cache feature of the Anqicms CMS background management interface and clear the website cache.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.
By simple steps, Anqi CMS can transform the original static text content into an interactive and visually attractive dynamic display.This not only enhances the professionalism and attractiveness of the website content, but also brings a more immersive and efficient reading experience to your readers.Make full use of these functions of AnQi CMS, and it will help your website stand out among numerous contents.
Frequently Asked Questions (FAQ)
- Why did I turn on the Markdown editor and add JS code, but the mathematical formulas or flow charts still do not display?This is usually caused by several reasons:
- Cache problem:Make sure you have cleared the Anqicms website cache and refreshed the browser cache forcibly (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 header file in effect. |safeFilter missing:When outputting article content, make sure you have used{{ articleContent|safe }}. If missing