代码不高亮?别逗!

不高亮的代码莫得灵魂!

这里先说明一下,我使用的是 hexo-theme-materyhexo@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 的配置方法,因为它不会像 Highlighthexo-theme-matery 主题中出现显示问题(个人感觉 Matery 主题更适合使用 prismJS 进行代码高亮)

2.1 修改 _config.yml(根目录)

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

_config.yml(根目录)
1
2
3
4
5
6
7
8
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.prismlibs.js.prism 中的路径如下(如果没有就手动添上):

_config.yml(主题目录)
1
2
3
4
5
6
libs:
css:
prism: /libs/prism/prism.css # 标注 prism.css 文件位置

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

这是我的配置参数,仅供参考
图2.2.1 我的配置

2.3 修改 post-detail.ejs

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

post-detail.ejs
1
2
3
4
5
<% 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>
<% } %>

参考文章

代码高亮|Hexo