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

Enable Markdown Editor

The AutoCMS supports Markdown editor, which is the basis for code highlighting. First, you need to ensure that Markdown is enabled as the content editing method in the background.

Enter the Anqi CMS background management interface, navigate toGlobal Settings, and then click.Content Settings. Confirm on this page,Whether to enable Markdown editorThe option has been checked or set to enabled status. After enabling, you can select to use the Markdown editor to compose content when creating or editing documents.

In Markdown, create a code block

Once the Markdown editor is enabled, the way to insert a code block in the article content is the 'Fenced Code Blocks' in the standard Markdown syntax.This is usually marked by three consecutive backticks () to indicate the start and end of a code block.python` 或 `javascript.

Example:

这是我的Python代码示例：

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

hello_anqicms()

Here 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 in the variable is safe HTML, which does not require escaping, thus allowing code highlighting libraries to correctly identify and process code blocks.

Through these configurations, the safe CMS can elegantly display Markdown formatted code, providing your readers with a better content reading experience.

Common Questions (FAQ)

Why does my Markdown code block not highlight and just show a simple text box?This usually occurs because the front-end page has not loaded or initialized the JavaScript library and CSS stylesheet required for code highlighting. Please check yourbase.htmlTemplate file has the correct steps been introduced according to the above?highlight.jsof the CSS theme and JavaScript library, and ensurehljs.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 Safe CMS backend.

Can I change the syntax highlighting style or theme?Of course you can.highlight.jsA variety of preset CSS themes are provided, such asatom-one-dark.min.css/monokai.min.cssand. You just need tobase.htmlIn the file, replace the CSS link to be introduced with your preferred theme link. For example,default.min.csswithatom-one-dark.min.css，You can switch the code highlighting theme to dark mode. You can also customize CSS to override or modify the styles of existing themes.

Can you see the code highlighting effect directly in the AnQi CMS backend editor?In most cases, the Markdown editor provided by the security CMS backend offers real-time preview functionality, which simulates the effect of converting Markdown 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 styles, rather than the beautifully highlighted syntax that will be presented on the website front end.highlight.jsLibraries will be displayed.