Hexo 原生代码块较为单调

如图所示：

Hexo原生代码块

所以也找了代码高亮插件 hexo-prism-plugin

安装命令如下：还没有Git的 去翻前面的文章

1
2
3
npm i -S hexo-prism-plugin


输出Run npm audit for details. 只是在安装过程中发现了一些漏洞 从输出情况看是安装好了的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ npm i -S hexo-prism-plugin

up to date, audited 427 packages in 3s

23 packages are looking for funding
  run `npm fund` for details

11 vulnerabilities (2 low, 1 moderate, 8 high)

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.


执行npm audit命令检查后 发现两个ReDos和一个XSS脚本漏洞，网上看也有些人用这个插件的 凑合用吧 不放心就用别家的插件

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: true    # default false
  custom_css:

主要就是把默认的高亮hignlight 关了
enable 启用/生效的意思
加一段prism_plugin

其中这里的theme可以改很多不同的主题
在开发文档里有写 另外已经有人扒出了不同主题的效果

最后

1
2
3
4
5
6
hexo clean

hexo g

hexo s

tips: hexo clean挺重要的 作用是清除缓存 刚上手容易忽视这种小操作
hexo g 是加载内容
hexo s 是启动本地服务器

上传是hexo d 这里是搭建本地的 后几篇文章再说