hexo-butterfly主题代码高亮设置

参考文章

prism代码高亮

在使用butterfly自带的代码高亮中发现有些代码不高亮，因此在网上找代码高亮方案，发现了使用prism的代码高亮，但是没有在butterfly中使用的教程，经过一段时间的摸索，终于能够使用，记录下在butterly主题中使用prism代码高亮的方法。

在根目录`_config.yml`中修改配置

highlight:   #关闭自带的代码高亮
  enable: false
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: false
  hljs: false
prismjs:
  enable: true  #开启此设置
  preprocess: true
  line_number: true
  tab_replace: ''
  
  #在尾部添加以下代码
  marked:
  	langPrefix: line-numbers language-

下载prism

官网

选择配置

themes 主题,随便选，后面要重新配置
Languages 需要高亮的语言，根据需要选择，觉得麻烦可以选select/unselect all全选
Plugins 以下是我选择的插件，显示语言和复制按钮主题都有，可以不选。
- line numbers 显示代码行数
- Show Language 显示语言，可以用主题自带的，两种显示可以共存
- toolbar 工具栏
- Copy to Clipboard Button 复制按钮，toolbar是前置

选择好后下载js和css文件

配置

将下载好的prism.js和prism.css文件放入/theme/butterfly/source/js/prism/目录中prism目录需要自己创建。

编辑prism.css文件,在开头处添加下列代码

:root{
  --hl-color: #ccc;          #代码框字体顔色【必须】  
  --hl-bg: #2d2d2d;          #代码框背景色【必须】    
  --hltools-bg: #323233;     #代码框顶部工具栏背景色【可选】
  --hltools-color: #fbf1c7;  #代码框顶部工具栏字体顔色【可选】     
  --hlnumber-bg: #504945;    #代码框行数背景色【可选】  
  --hlnumber-color: #fbf1c7; #代码框行数字体顔色【可选】     
  --hlscrollbar-bg: #928374; #代码框滚动条顔色【可选】  
  --hlexpand-bg: #d3af86;    #代码框底部展开背景色【可选】
}

在_config.butterfly.yml文件中的inject处添加下面两个链接

inject:
  head:
    - <link rel="stylesheet" href="/js/prism/prism.css">
  bottom:
    - <script src="/js/prism/prism.js" async></script>

重启查看是否生效

配置好后发现之前的shell命令也能高亮，