Hexo博客：六、prism代码高亮

hexo 默认的代码高亮插件为 highlight.js，highlight在代码不标明语言的时候，好像不会自识别，然后在网上找到一个prism的高亮

1. 禁用highlight

打开根目录下的_config.yml文件，修改配置

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace:

2. 获取prism

下载页面：https://prismjs.com/download.html；选择 theme 主题、language 支持的语言（不要选太多，够用就好）、plugin 插件（可以选Line Numbers、Copyto Clipboard Button，其他的看自己需求）；然后点击下载按钮就行了；下载到本地之后，将它们重命名为 prism.js、prism.css，然后将它们放置到 /themes/next/source/js/prism/ 目录下（prism 文件夹需要自己新建），即它们的路径分别是：

/themes/next/source/js/prism/prism.js
/themes/next/source/js/prism/prism.css

3. 配置 prism

修改 themes/next/layout/_partials/head.swig，在尾部添加以下代码：

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

修改 themes/next/layout/_partials/footer.swig，在尾部添加以下代码

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

4. 修改博客配置

打开根目录下的_config.yml文件，添加下面代码

marked:
  langPrefix: line-numbers language-

4. 测试prism

清理后，重新运行直接测试

hexo clean && hexo s

参考文章

https://www.zfl9.com/hexo-code.html

最后编辑于：2020.02.27 21:52:05