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
欢迎大家积极评论交流。