安企CMS如何在Markdown中实现代码高亮显示功能？
在安企CMS中，实现Markdown格式的代码高亮显示，能够极大地提升技术类文章的可读性和专业性。作为一名经验丰富的网站运营人员，我将详细介绍如何在安企CMS中启用并配置这一功能。
启用Markdown编辑器
安企CMS支持Markdown编辑器，这是实现代码高亮的基础。首先需要确保在后台启用了Markdown作为内容编辑方式。
进入安企CMS后台管理界面，导航至 全局设置，然后点击 内容设置。在该页面中，确认 是否启用Markdown编辑器 选项已被勾选或设置为启用状态。启用后，在创建或编辑文档时，即可选择使用Markdown编辑器来撰写内容。
在Markdown中创建代码块
一旦Markdown编辑器启用，在文章内容中插入代码块的方式是标准Markdown语法中的“栅栏式代码块”（Fenced Code Blocks）。这通常通过连续三个反引号（```）来标记代码块的开始和结束。为了实现代码高亮，你需要在开头的三个反引号后紧跟着指定代码语言的名称，例如 python` 或 `javascript。
示例：
这是我的Python代码示例：
```python
def hello_anqicms():
print("Hello, AnQiCMS users!")
hello_anqicms()
这是我的JavaScript代码示例：
document.addEventListener('DOMContentLoaded', function() {
console.log('AnQiCMS is awesome!');
});
安企CMS会将这些Markdown代码块转换为对应的HTML结构，通常是 `<pre><code class="language-python">...</code></pre>`。然而，这种转换本身并不会自动为代码添加颜色或样式。要实现视觉上的代码高亮，还需要在前端引入相应的JavaScript库和CSS样式。
### 在前端实现代码高亮显示
为了让浏览器中的代码块呈现出不同颜色以区分语法元素，我们需要借助第三方代码高亮库。目前，`highlight.js` 和 `Prism.js` 是两个非常流行且易于集成的选择。在这里，我将以 `highlight.js` 为例，介绍如何在安企CMS模板中进行集成。
你需要编辑安企CMS的前端模板文件，通常是位于 `/template` 目录下的 `base.html` 文件。这个文件是网站所有页面的基础骨架，在这里引入的CSS和JavaScript会影响到全站。
1. **引入代码高亮样式表（CSS）**
在 `base.html` 文件的 `<head>` 标签内，添加一个 `highlight.js` 主题的CSS链接。`highlight.js` 提供了多种主题，你可以根据网站整体风格选择。例如，选择一个默认主题或深色主题：
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<!-- 或者选择一个深色主题，例如： -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"> -->
```
请注意，文档中提到的 `github-markdown-css` 提供了Markdown内容的整体样式，但通常不包含完整的代码语法高亮。因此，额外引入 `highlight.js` 的CSS是必要的。
2. **引入代码高亮JavaScript库**
同样在 `base.html` 文件中，通常在 `</body>` 标签之前，引入 `highlight.js` 的核心JavaScript文件：
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
```
如果你的网站需要支持多种语言的代码高亮，可能需要引入特定语言的模块。然而，`highlight.js` 的 `highlight.min.js` 版本通常包含了许多常用语言，并通过自动检测来工作，简化了配置。
3. **初始化代码高亮功能**
在引入 `highlight.js` 库之后，你需要调用它的初始化函数，让它扫描页面并高亮代码块。这通常在一个小的JavaScript块中完成，确保在DOM内容加载完毕后执行：
```html
<script>
document.addEventListener('DOMContentLoaded', (event) => {
hljs.highlightAll();
});
</script>
```
这段脚本应该放在引入 `highlight.min.js` 的 `script` 标签之后。
完成以上步骤后，重新发布你的文章或清空缓存，访问页面时，使用Markdown语法创建的代码块就应该能够正常显示语法高亮效果了。
### 内容显示考量
在安企CMS的模板中，当你使用 `{% archiveDetail with name="Content" %}` 这样的标签来输出Markdown转换后的HTML内容时，由于Markdown转换成的HTML可能包含各种标签，为了确保这些标签能够被浏览器正确解析而不是作为纯文本显示，你需要使用 `|safe` 过滤器。例如：
```twig
{% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}
这个 |safe 过滤器会告诉模板引擎，articleContent 变量中的内容是安全的HTML，不需要进行转义，从而允许代码高亮库正确地识别和处理代码块。
通过这些配置，安企CMS能够优雅地展示Markdown格式的代码，为你的读者提供更好的内容阅读体验。
常见问题 (FAQ)
为什么我的Markdown代码块没有高亮，只是显示了简单的文本框？
这通常是因为前端页面没有正确加载或初始化代码高亮所需的JavaScript库和CSS样式表。请检查您的 base.html 模板文件中是否已按照上述步骤正确引入 highlight.js 的CSS主题和JavaScript库，并确保 hljs.highlightAll() 函数在页面加载后被调用。同时，也要确认在安企CMS后台的“内容设置”中已启用Markdown编辑器。
我可以更改代码高亮的样式或主题吗？
当然可以。highlight.js 提供了多种预设的CSS主题，例如 atom-one-dark.min.css、monokai.min.css 等。您只需在 base.html 文件中，将引入的CSS链接替换为您喜欢的主题链接即可。例如，将 default.min.css 替换为 atom-one-dark.min.css，即可将代码高亮主题切换为深色风格。您也可以自定义CSS来覆盖或修改现有主题的样式。
安企CMS后台编辑器中能直接看到代码高亮效果吗？
通常情况下，安企CMS后台的Markdown编辑器提供的是实时预览功能，它会模拟Markdown转换成HTML后的效果，但并不一定集成完整的前端代码高亮库。这意味着您在编辑器中看到的可能是带有基本代码样式的文本，而不是最终在网站前端呈现的精美语法高亮效果。完整的高亮效果只有在内容发布到网站前端后，由浏览器加载并执行 highlight.js 等库才会显示。