hexo-butterfly主题代码高亮设置

在使用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命令也能高亮,

# hexo-butterfly主题代码高亮设置

参考文章

prism代码高亮

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

下载prism

配置

重启查看是否生效

# 优化写博客体验

# 使用线程池