在安企CMS中管理内容，特别是包含代码的文档，您可能会希望代码块能够以美观且易于阅读的方式呈现，这通常需要实现语法高亮。Markdown作为一种轻量级标记语言，让内容创作变得简洁高效，而安企CMS内置的Markdown编辑器更是如虎添翼。当Markdown内容被渲染成HTML时，如何让其中的代码块实现语法高亮呢？这并非系统默认功能，但通过简单的几步配置，即可轻松实现。

安企CMS在内容处理方面提供了极大的灵活性。当您在后台使用Markdown编辑器撰写文章，并在其中插入代码块时，系统会负责将Markdown语法（例如，由三个反引号 ` 包裹的代码）转换为相应的HTML结构（通常是 <pre><code>...</code></pre>）。然而，这个转换过程仅仅是结构上的，它并不会为代码添加颜色、字体样式等高亮效果。要实现这一点，我们需要借助前端的JavaScript库来完成。

启用Markdown内容渲染

首先，确保您的安企CMS系统已正确配置以渲染Markdown内容。在安企CMS的后台，通常在“全局设置”下的“内容设置”中，您可以找到启用Markdown编辑器的选项。一旦启用，您在文章内容字段（例如文档详情标签archiveDetail中Content字段）中撰写的Markdown，包括代码块，都会被系统自动转换为HTML。例如，在模板中使用{% archiveDetail archiveContent with name="Content" render=true %}{{archiveContent|safe}}时，render=true参数就是确保Markdown内容被正确转换成HTML的关键。|safe过滤器则用于指示模板引擎，此内容是安全的，不需要进行HTML实体转义，以便JavaScript库能够识别并处理生成的<pre><code>标签。

引入前端语法高亮库

实现语法高亮的关键在于前端。目前市面上有许多优秀的JavaScript库可以完成这项任务，例如highlight.js或Prism.js。它们的工作原理是扫描页面中预先定义的代码标签（如<pre><code>），然后根据代码的语言类型（例如JavaScript、Python、HTML等）应用预设的样式和结构，从而实现高亮。

这里我们以广受欢迎的highlight.js为例，演示如何在您的安企CMS模板中集成它。

第一步：选择并引入高亮样式表

highlight.js提供了多种主题样式供您选择。您需要挑选一个与您的网站设计风格相匹配的CSS文件。这些文件通常可以通过CDN（内容分发网络）服务获取，以提高加载速度。

在您的安企CMS模板文件中，找到您网站的公共头部文件，通常是位于/template目录下的base.html或类似的全局模板文件。在该文件的<head>标签内，添加您选择的highlight.js主题CSS链接。例如，如果您喜欢“default”主题：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css">

如果您想要深色主题，可以选择monokai或dracula等：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/monokai.min.css">

第二步：引入高亮JavaScript库

同样在base.html文件的<head>标签内（或者为了优化加载，放在</body>标签结束前），引入highlight.js的核心JavaScript文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>

第三步：初始化语法高亮

在highlight.js脚本加载完毕后，您需要调用它的初始化函数来扫描页面并应用高亮。这通常在页面内容完全加载后执行。您可以将这段JavaScript代码添加到引入highlight.min.js之后，或者放置在您自定义的JavaScript文件中，确保在DOM加载完成后执行。

一个常见的做法是，在base.html的</body>标签结束前，紧跟在highlight.min.js的引入之后，添加如下代码：

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('pre code').forEach((block) => {
            hljs.highlightElement(block);
        });
    });
</script>

这段代码监听DOMContentLoaded事件，确保HTML文档被完全加载和解析后才执行。它会选择页面中所有的<pre><code>元素，并对它们应用highlight.js的语法高亮。

在Markdown中指定代码语言

为了让highlight.js能够准确地识别并高亮不同编程语言的代码，您需要在Markdown代码块中明确指定代码语言。这通过在三个反引号后面加上语言名称来完成：

```javascript
// 这是一个JavaScript代码块
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet("World");

# 这是一个Python代码块
def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n-1)

print(factorial(5))

当您发布包含这些Markdown代码块的内容后，安企CMS会将其转换为带有class="language-javascript"或class="language-python"等属性的<pre><code class="language-xyz">标签，highlight.js就能根据这些类名自动识别并应用正确的语法高亮。

总结

通过在安企CMS中启用Markdown渲染，并在网站的前端模板（如base.html）中引入highlight.js这类语法高亮库的CSS和JavaScript文件，再配合简单的初始化脚本，您就可以让Markdown内容中的代码块焕发光彩。这不仅提升了代码的可读性，也极大地改善了用户阅读体验，使得技术内容更具吸引力。

常见问题 (FAQ)

1. 为什么我按照步骤操作了，代码块却没有高亮效果？ 请检查几个关键点：

  • Markdown是否正确渲染为HTML？ 确认您的内容编辑器的Markdown渲染功能已开启，并且在模板中调用内容时使用了render=true参数（例如{% archiveDetail ... render=true %}）和|safe过滤器。
  • CDN链接是否有效？ 检查引入的highlight.js的CSS和JS文件的CDN链接是否可以正常访问，没有404错误。
  • JavaScript初始化是否成功？ 确保highlight.js的初始化代码（例如hljs.highlightAll();）在highlight.js库加载完成后正确执行，且没有JavaScript错误阻止其运行。您可以打开浏览器开发者工具（F12），查看控制台是否有报错。
  • 代码语言是否指定？ 确保Markdown代码块的开头指定了语言类型（例如`javascript），这有助于高亮库识别代码种类。

2. 可以更换高亮主题吗？ 当然可以。highlight.js提供了多种内置主题。您只需更换在base.html中引入的CSS文件的路径即可。例如，将default.min.css替换为monokai.min.css，或者访问highlight.js官方网站查看更多主题及其对应的CDN链接。更换后，清除浏览器缓存并刷新页面即可看到新主题效果。

3. 如果我的网站已经引入了jQuery，初始化代码需要修改吗？ 如果您网站已引入jQuery库，可以将初始化代码简化。例如，使用jQuery的$(document).ready()方法来确保DOM加载完成后执行：

<script>
    $(document).ready(function() {
        $('pre code').each(function(i, block) {
            hljs.highlightElement(block);
        });
    });
</script>

请确保这段jQuery代码在jQuery库文件和highlight.js库文件之后被引入。