对于使用hexo-prism-plugin插件代码无法渲染问题的解决方法

1.问题描述

按照其他博主的对于hexo的个性化配置，我使用了代码高亮插件——prism-plugin，但是使用此插件却无法实现代码高亮的功能；而且对于代码行数也无法进行正确的渲染，大致情况如下。

1.1 我的站点hexo配置情况

hexo: 5.1.1
hexo-cli: 4.2.0
os: Windows_NT 10.0.18363 win32 x64
node: 12.16.1
v8: 7.8.279.23-node.31
uv: 1.34.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.40.0
napi: 5
llhttp: 2.0.4
http_parser: 2.9.3
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1

1.2 使用的安装方法

$ cnpm install hexo-prism-plugin --save
$ cnpm i -S hexo-prism-plugin //使用此写法也可以实现安装
$ hexo clean && hexo generate && hexo server

hexo根目录下_config.yml文件下的配置情况：

highlight:
  enable: false
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'default'
  line_number: true   # default false
  custom_css: ''     # optional

1.3 hexo使用主题为matery

hexo-themes-matery主题 https://github.com/blinkfox/hexo-theme-matery

尽管安装过程与配置情况与网上博客相同，但仍然无法实现代码高亮功能。希望情况和我一样的小伙伴可以耐心阅读下去😀。

2.问题探索

首先，我切换了hexo的主题为默认主题landscape，发现该主题下可以实现代码行数正确显示；但是仍然无法实现高亮显示，联想matery主题下代码行数显示错误——盲猜可能是主题适配存在缺陷。

然后，我转变了思路——寻找可以实现代码高亮的方式；找到了此篇博文——>https://www.jianshu.com/p/f395d92a1110

按照其思路实现了代码高亮功能😁

3.问题解决

3.1 进入prismjs官网

prismjs https://prismjs.com/download.html

prismjs介绍：Prism是一种轻量级的，可扩展的语法突出显示工具，在构建时考虑了现代Web标准。

3.2 选择主题、语言、其他插件

点击下载JS和CSS code即可

3.3 文件放置位置

step1. 可以在themes\hexo-theme-matery\source\js下新建prism文件夹，用来存放js与css代码。

step2. 找到此文件hexo-theme-matery\layout_partial\head.ejs打开，在head尾标签之前黏贴以下代码：

<link rel="stylesheet" href="/js/prism/prism.css">

step3. 找到此文件hexo-theme-matery\layout_partial\footer.ejs打开，在最后link标签部分黏贴以下代码：

<script src="/js/prism/prism.js" async></script>

step4. 记得在hexo的根目录_config.yml下设置enable: false

highlight:
  enable: false

step5. 重新生成博客文件，重启本地服务。

$ hexo clean
$ hexo generate
$ hexo server

欢迎大家积极评论交流。