In AnQi CMS, implementing Markdown code highlighting can greatly enhance the readability and professionalism of technical articles.As an experienced website operator, I will introduce how to enable and configure this feature in AnQi CMS.

Enable Markdown editor

AnQi CMS supports Markdown editor, which is the basis for implementing code highlighting. First, make sure that Markdown is enabled as the content editing method in the background.

Enter the AnQi CMS backend management interface, navigate toGlobal Settingsand then clickContent settingsConfirm on this page,Enable Markdown editor?The option has been checked or set to enabled status. After enabling, you can select to use the Markdown editor to write content when creating or editing documents.

Create a code block in Markdown

Once the Markdown editor is enabled, the way to insert code blocks in the article content is the 'fenced code blocks' in standard Markdown syntax.This is typically marked by three consecutive backticks () to indicate the start and end of a code block.To achieve syntax highlighting, you need to follow the name of the specified code language immediately after the first three backticks, for examplepython` 或 `javascript.

Example:

这是我的Python代码示例：

```python
def hello_anqicms():
    print("Hello, AnQiCMS users!")

hello_anqicms()

This is my JavaScript code example:

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}}

This|safeThe filter tells the template engine,articleContentThe content within the variable is safe HTML, which does not require escaping, thus allowing the code highlighting library to correctly identify and process code blocks.

With these configurations, Anq CMS can elegantly display Markdown-formatted code, providing your readers with a better content reading experience.

Frequently Asked Questions (FAQ)

Why is my Markdown code block not highlighted, but just shows a simple text box?This is usually because the front-end page has not loaded or initialized the JavaScript library and CSS stylesheet required for code highlighting. Please check yourbase.htmlIs the template file correctly imported according to the above steps?highlight.jsand make sure the CSS theme and JavaScript library arehljs.highlightAll()The function is called after the page is loaded. Also, make sure that the Markdown editor is enabled in the "Content Settings" of the Anqi CMS backend.

Can I change the code highlighting style or theme?Of course you can.highlight.jsMultiple preset CSS themes are provided, such asatom-one-dark.min.css/monokai.min.cssetc. You just need tobase.htmlIn the file, replace the CSS link that is being introduced with the link to your preferred theme. For example, justdefault.min.cssReplaceatom-one-dark.min.cssYou can change the code highlighting theme to dark mode. You can also customize the CSS to override or modify the existing theme styles.

Can I see code highlighting directly in the AnQi CMS backend editor?In most cases, the Markdown editor provided by the Anqi CMS backend offers a real-time preview feature, which simulates the effect of Markdown being converted to HTML, but it may not integrate a complete frontend code highlighting library.This means that what you see in the editor may be text with basic code styling, rather than the beautifully highlighted syntax that is presented on the website front end.The full highlighting effect only occurs after the content is published on the website front-end and loaded by the browserhighlight.jsIt will only display with certain libraries.