设置代码高亮 | Hexo-Matery

代码不高亮？别逗！

不高亮的代码莫得灵魂！

这里先说明一下，我使用的是 hexo-theme-matery 和 hexo@6.1.0

一、准备文件

1.1 下载

点击下载 prism.css
点击下载 prism.js

然后将这两份文件复制到 博客根目录/themes/{主题文件夹}/source/libs/prism/ 目录下！

1.2 说明

您可能会发现在该目录下会已经存在一个 prism.css 文件，那是主题自带的，也可以使用，您可以按照需自己的需求来！但是如果使用默认的 prism.css 一定使用配套的 prism.js ！否则会出现问题！如果想使用自定义的 prismJS 高亮规则，可以去官网配置并下载：自定义 prismJS 规则！

补充：
我不知道为什么，我的 博客根目录/themes/{主题文件夹}/source/libs/prism/ 目录下只有一个 prism.css ，这使得我的博客代码高亮出了很大问题！后来我自己配置一套 prismJS 文件后才解决的问题！

同时，您需要知道的是：PrismJS 官网下载的 prism 文件在 hexo-theme-matery 主题下显示有些冲突，需要您去修改对应的 CSS 文件。这里我已经修改好了，所以 hexo-theme-matery 主题的朋友，您可以直接使用我提供的下载，它支持几乎所有语言得代码高亮！（其他主题我未做探索）

二、配置 | prismJS

这里我只讲解 prismJS 的配置方法，因为它不会像 Highlight 在 hexo-theme-matery 主题中出现显示问题（个人感觉 Matery 主题更适合使用 prismJS 进行代码高亮）

2.1 修改 _config.yml(根目录)

在根目录下的 _config.yml 文件中找到对应代码位置并修改成如下内容：

_config.yml(根目录)

highlight:
  enable: false # 关闭 highlight
prismjs:
  enable: true # 启用 prismjs
  preprocess: true # Hexo 内建的 PrismJS 支持浏览器端高亮（preprocess 设置为 false）和服务器端高亮（preprocess 设置为 true）两种方式
  line_number: true # 是否显示行号
  line_threshold: 0 # 接受一个可选的阈值，只要代码块的行数超过这个阈值，就只显示行号。 默认值为 0。
  tab_replace: '' # 用代码内的 tab (\t) 替换为给定值，默认值是两个空格。

2.2 修改 _config.yml(主题目录)

在根目录下的 _config.yml 文件中找到对应代码位置并确保 libs.css.prism 和 libs.js.prism 中的路径如下（如果没有就手动添上）：

_config.yml(主题目录)

libs:
  css:
    prism: /libs/prism/prism.css # 标注 prism.css 文件位置
    
  js:
    prism: /libs/prism/prism.js # 标注 prism.js 文件位置

这是我的配置参数，仅供参考：

2.3 修改 post-detail.ejs

最后打开 博客根目录/themes/{主题文件夹}/layout/_partial/post-detail.ejs 文件，确保（大概在 74 行）有如下代码（如果缺少就补上）：

post-detail.ejs

<% if (config.prismjs && config.prismjs.enable) { %>
    <!-- 是否加载使用自带的 prismjs. -->
    <link rel="stylesheet" href="<%- theme.jsDelivr.url %><%- url_for(theme.libs.css.prism) %>">
    <script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.prism) %>"></script>
<% } %>