AnQiCMS 为内容创作者提供了便捷高效的 Markdown 编辑器，让我们能够轻松组织文章结构、插入代码块和图片。然而，当我们的内容需要展示复杂的数学公式或者清晰的流程图时，仅仅依靠 Markdown 语法本身是不足以让它们在网页上美观呈现的。这些高级功能需要在浏览器端引入特定的 JavaScript 库，才能被正确解析和渲染。
那么，如何将这些必要的 JavaScript 库引入到您的 AnQiCMS 网站中，确保 Markdown 内容的完美显示呢？核心在于修改网站的公共模板文件 base.html。
启用Markdown编辑器
在开始修改模板文件之前，我们首先需要确认一个前提：您已经在 AnQiCMS 的后台启用了 Markdown 编辑器。这通常可以在“全局设置”下的“内容设置”中找到相应的选项。请确保 Markdown 编辑器处于开启状态，这样系统才能正确识别并处理您用 Markdown 格式撰写的内容。
为什么选择base.html？
在 AnQiCMS 的模板体系中，base.html 文件扮演着基石的角色。它包含了网站公共的头部（<head>）、底部（<footer>）等区域，几乎所有其他页面模板都会继承这个基础骨架。因此，将通用的 JavaScript 库和 CSS 样式引入到 base.html 文件的 <head> 标签内部，是最为合理且高效的做法。这样可以确保这些功能在您网站的所有页面上都能被加载和执行，而无需重复添加。
为Markdown内容引入必要脚本
接下来，我们将分步在 base.html 文件的 <head> 标签内部引入三部分代码，分别用于增强 Markdown 的样式、支持数学公式渲染，以及支持流程图展示。
1. 引入Markdown内容样式（可选）
为了让 Markdown 渲染出的内容在视觉上更具可读性，我们可以引入一套常用的 GitHub 风格 Markdown 样式表。这会为您的 Markdown 内容提供一套简洁、专业的排版，提升用户的阅读体验。
请将以下这行代码添加到 base.html 文件的 <head> 标签内部：
<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" />
2. 支持数学公式渲染（MathJax）
如果您需要在文章中插入并正确显示 LaTeX 语法的数学公式，MathJax 是一个非常强大的解决方案。它能够将页面中的数学公式解析并渲染成高质量的图像或文本，确保在不同浏览器和设备上都能清晰显示。
请将下面的 JavaScript 引用添加到 base.html 文件的 <head> 标签内：
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
这里使用了 async 属性，这意味着脚本将异步加载，不会阻塞页面的渲染，有助于提升用户体验。
3. 支持流程图渲染（Mermaid.js）
对于需要展示流程图、序列图或甘特图等结构化信息的场景，Mermaid.js 是一个理想的选择。它允许您通过简单的文本描述来生成复杂的图表。
集成 Mermaid.js 的方式如下，同样放置在 base.html 文件的 <head> 标签内：
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
这段脚本通过 type="module" 引入了 Mermaid 库，并在页面加载时自动初始化，使其能够识别并渲染 Markdown 代码块中的 Mermaid 语法。
检验成果
完成以上代码的添加并保存 base.html 文件后，您可以登录 AnQiCMS 后台，创建或编辑一篇文档。在 Markdown 编辑器中尝试插入数学公式（例如使用 $$...$$ 或 $...$ 包裹 LaTeX 语法）和 Mermaid 图表（使用 mermaid ...` 包裹 Mermaid 语法）。
例如，您可以尝试：
数学公式：
这是一个内联公式：$E=mc^2$
这是一个块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
流程图：
graph TD
A[开始] --> B{判断};
B -- 是 --> C[执行操作];
B -- 否 --> D[结束];
C --> D;
发布文档后，访问前端页面，检查这些元素是否已经能够被正确渲染和展示。如果一切正常，恭喜您，您的 AnQiCMS 网站现在具备了强大的 Markdown 内容展示能力，能够以更专业、更生动的方式呈现各种复杂信息。
常见问题 (FAQ)
为什么我的数学公式或流程图没有正确显示，只显示了原始代码？ 首先，请确保您已经在 AnQiCMS 后台的“全局设置”->“内容设置”中启用了 Markdown 编辑器。其次，检查
base.html文件中是否正确引入了 MathJax 和 Mermaid.js 的代码，并且位置是在<head>标签内部。此外，在您的内容模板（例如archive_detail.html或page_detail.html）中，确保您用来显示 Markdown 内容的变量（如{{archive.Content}}）后面添加了|render|safe过滤器，例如{{archive.Content|render|safe}}，这样系统才会将 Markdown 转换为 HTML 并允许浏览器解析其中的脚本。我能否使用其他的 Markdown 样式或者数学公式/流程图渲染库？ 理论上是可以的。AnQiCMS 提供了高度的模板自定义能力，您完全可以根据自己的需求替换或增加其他兼容的 JavaScript 库。例如，您可以选择不同的 Markdown CSS 框架，或者其他数学公式渲染引擎。但请注意，替换后需要您自行确保新引入的库与 AnQiCMS 的模板渲染机制以及您 Markdown 内容的语法兼容，并且经过充分测试，避免出现渲染错误或功能冲突。
引入这些外部脚本会不会影响网站的加载速度？ 外部脚本的加载确实会增加页面请求和一定的网络延迟。然而，我们这里引用的 MathJax 和 Mermaid.js 都使用了 CDN（内容分发网络），这意味着用户可以从离他们地理位置最近的服务器加载脚本，从而减少延迟。MathJax 还特别使用了
async属性，允许脚本异步加载，尽量不阻塞页面的初始渲染。对于大多数 AnQiCMS 用户来说，这些库带来的功能增强远远超过了它们可能对加载速度造成的轻微影响，并且通过合理的 CDN 和异步加载，影响已经被最小化。