Hexo 对 highlight.js 与 prismjs 两种代码高亮库提供内建支持。本篇教程将展示如何将 Hexo 的内建语法高亮组件整合至你的模板中。

Hexo 支持两种代码块写法——代码块标签插件和反引号代码块标签插件：

上面的第三种是 Markdown 的 fenced code block 语法。Hexo 对其进行了扩展，使其支持更多特性。在标签插件文档中你可以找到可用的选项。

提示：Hexo 支持用任何格式书写文章，只需安装相应渲染插件即可。不论文章以何种格式书写（Markdown、EJS、Swig、Nunjuck、Pug、ASCIIDoc），上述三种代码块语法总是可用。

以上为 Hexo 的默认配置。

当 highlight.enable 和 prismjs.enable 均为 false 时，代码块输出的 HTML 由相应的渲染器控制。举个例子：marked.js（Hexo 的默认 Markdown 渲染器 hexo-renderer-marked 由此驱动）会把语言加入 标签的 class 中：

如果内建语法高亮器均未启用，你可以安装第三方语法高亮插件，也可以使用浏览器端的语法高亮库（例如 highlight.js 和 prism.js 也都支持在浏览器中运行）。

highlight.js 默认开启，用作 Hexo 的服务端高亮组件。如果你需要在浏览器端运行 highlight.js，请把它关闭。

「服务端高亮」指语法高亮在 hexo generate 或 hexo server 时完成。

auto_detect 是 highlight.js 的特性，能够自动检测代码块的语言。

提示：如果你想使用「子语言高亮」功能（例如在高亮 HTML 时同时高亮内部嵌入的 JavaScript 代码），请开启 auto_detect，并且在文章中插入代码块时不要标注语言。

auto_detect 十分耗费资源。 如果你不需要使用「子语言高亮」功能，或者不介意在书写代码块时标记语言，请不要启用此功能。

highlight.js 不支持行号显示。

Hexo 通过用 和 包裹其代码块为其添加了行号显示支持:

这不是 highlight.js 的行为，因此需要为 和 添加自定义 CSS 代码。部分主题对此提供内建支持。

你大概也注意到了，所有代码块的 class 都没有 hljs- 前缀。我们 为此专门准备了一个章节。

用代码内的 tab (\t) 替换为给定值，默认值是两个空格。

为了支持行号显示，Hexo 将输出包裹在了 和 内部。如果要保持 highlight.js 原来的行为，你需要将 line_number 和 wrap 全部关闭。

因为 line_number 功能依赖 wrap，你无法在配置中关闭 wrap 而又开启 line_number。如果你将 line_number 设置为 true 的话，wrap 将被自动开启。

当 hljs 设置为 true 时，所有代码块的 HTML 输出均会给 class 添加 hljs- 前缀（无论 wrap 是否开启）：

提示：当 line_number 和 wrap 为 false，hljs 为 true 的时候，你可以在站点上直接应用 highlight.js 的主题。

PrismJS 默认禁用。启用 PrimeJS 前应设置 highlight.enable 为 false。

Hexo 内建的 PrismJS 支持浏览器端高亮（preprocess 设置为 false）和服务器端高亮（preprocess 设置为 true）两种方式。

使用服务器端高亮时（preprocess 设置为 true），只需要在站点引入 Prismjs 的主题（CSS 样式表）即可；而使用浏览器端高亮时（preprocess 设置为 false），需要将 JavaScript 文件也引入。

PrismJS 主要是面向浏览器的。因此，在服务器端高亮模式下只有部分插件可用：

preprocess 设置为 false 时所有 primejs 插件均可用，只需额外注意以下几点：

当 preprocess 与 line_number 均设置为 true 时，只需要引入 prism-line-numbers.css 即可启用行号显示。如果 preprocess 和 line_number 均被关闭，则需要将 prism-line-numbers.css 和 prism-line-numbers.js 都引入才能启用行号显示。

用代码内的 tab (\t) 替换为给定值，默认值是两个空格。

Hexo 语法高亮部分的源码可参见：