Butterfly 自定义代码高亮字体
原创
Butterfly 自定义代码高亮
这部分内容，在 butterfly 官方文档下有对应教程：自定义代码配色
但是该博客下提供的代码高亮css文件项目已经失效了，既然如此，我这里就再提供一篇较为完整的教程，仅供参考
配置里启用 Highlight
修改 Hexo 根目录下的 _config.yml
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:
hljs: true然后修改 butterfly 主题目录下的配置文件
highlight_theme: false选择自己想要的高亮主题
先请大家打开 科学上网工具，然后登录 Github，接着进入该项目目录下：传送门
选择你想要的代码高亮主题，我这里以 vs 为例 （如果是 AcWing 社区的同学，应该会比较喜欢这个主题）
将 vs.css 文件里的内容全部复制下来
修改 CSS 样式文件
新建好一个接下来要 inject 进 butterfly 的 css 文件（如果不会的话，跟好我接下来的每一步）
在 Hexo 根目录下打开文件夹 source，在此处新建一个文件夹 source/static/css，然后进入 css 文件夹
新建一个文件 custom.css，把 Github 上 vs.css 里的内容先全部复制到该文件里
然后在最开头加上下面几段代码：
source/static/css/custom.css
:root {
--hl-color: #d3af86; /*代码框字体顔色 【必须】 (把下面.hljs的 color复製到这里来)*/
--hl-bg: #221a0f; /*代码框背景色 【必须】 (把下面.hljs的 background复製到这里来)*/
--hltools-bg: #321a0f; /*代码框顶部工具栏背景色 【可选】(如果你关掉了 copy、lang 和 shrink,可不用配置这个）*/
--hltools-color: #fff; /*代码框顶部工具栏字体顔色 【可选】(如果你关掉了 copy、lang 和 shrink,可不用配置这个）*/
--hlnumber-bg: #221a0f; /*代码框行数背景色 【可选】(如果已经关掉 line_number,可以不用配置这个)*/
--hlnumber-color: #fff; /*代码框行数字体顔色 【可选】 (如果已经关掉 line_number,可以不用配置这个)*/
--hlscrollbar-bg: #d3af86;/*代码框滚动条顔色 【可选】（默认为主题主顔色）*/
--hlexpand-bg: #d3af86; /*代码框底部展开背景色 【可选】(如果已经关掉 highlight_height_limit,可以不用配置这个)*/
}
...... 刚刚复制的 vs.css 内容这里填写的 :root 内容，是对于最终渲染到前端时，代码框的样式，这里的参数你先默认填上，后面我会教你怎么调最快
最后，我们配置 butterfly 主题下的配置文件，引入该 css 文件
inject:
head:
- <link rel="stylesheet" href="/static/css/custom.css">总结一下当前已经完成了哪些内容：
- 已经将
hljs配置设好，接下来会用hljs对代码块部分进行渲染 - 已经完成了对于代码字体高亮的主题配置，接下来代码高亮主题会用
vs2015
配置代码块的样式
我们启动调试功能，看一下现在的代码块长什么样子
可以看到，代码高亮的主题渲染已经完成了，但是代码块的背景很丑，我们按 F12 打开 chrome 的控制台
在 source 里面，找到我们的 custom.css 文件，然后开始对这些参数，边看边调色
chrome 我愿称之为最强前端调试器，实时渲染，类抽象展示，各种功能一应俱全
给懒人准备的我的配色方案，对没错，完全遵循星姐蓝配色 w
/* 代码高亮字体 */
:root {
--hl-color: #24292e;
--hl-bg: rgb(246 248 250);
--hltools-bg: #49b1f587;
--hltools-color: #ffffff;
--hlnumber-bg: rgb(235 239 241);
--hlnumber-color: #221a0f52;
}
.hljs {
background: white;
color: black;
}
.hljs-comment,
.hljs-quote,
.hljs-variable {
color: #008000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #00f;
}
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: #a31515;
}
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: #2b91af;
}
.hljs-doctag {
color: #808080;
}
.hljs-attr {
color: #f00;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: #00b0e8;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}Butterfly 自定义字体
基于前面的理论基础，可以继续修改我们自定义的 custom.css 样式文件
继续利用 chrome 去找代码块的源文件，发现所有的代码文本都被存放在一个 code 的 html 标签下
包括但不限于 Codeforces，AtCoder，LeetCode，AcWing 等网站都是如此undefined也就是说，可以基于我接下来的实现逻辑，制作一个插件，在各大网站 Code 网站上实现代码字体的更改的功能undefined不过有这功夫，相信大家肯定还是更喜欢配置更美化的本地开发环境 w
在 custom.css 文件中，我们给 code 这个标签强制覆盖上一层字体样式，即可实现代码块字体改变
#article-container pre, #article-container code {
font-family:Fira Code!important;
}这里我用的字体是 Fira Code，也就是著名的连体字符（例如：如果打出 >= 会渲染成 >= 等）
因此 Fira Code 显然不是电脑本地自带的，我这里就附带教一下如何引入你想要的字体
先去 GitHub 上找到你想要的的字体项目，我这里就拿 Fira Code 为例，进入到该项目页 传送门
翻到最下面的 Browser support 里，会告诉你他的 CDN 文件地址，直接引入你的 css 文件里即可
引入后，我们就可以捕获整个项目里的任意 html 标签，然后修改他的字体，包括但不限于主副标题，代码块，正文等
以我为例，我修改了主副标题、小字、代码块以及文章标题，如下：
/* CSS */
@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);
h1#site-title {
font-size: 8vh!important;
text-shadow:5px 2px 6px #000!important;
font-family:Fira Code!important
}
span#subtitle {
font-size: 3vh!important;
text-shadow:5px 2px 6px #000!important;
font-family:Fira Code!important
}
a#site-name {
text-shadow:5px 2px 6px #000!important;
font-family:Fira Code!important
}
#article-container pre, #article-container code {
font-family:Fira Code!important;
}
.article-title {
font-weight: bolder;
font-family:Fira Code!important;
}如果觉得上述文章有帮助，欢迎留下你的评论，让我知道我确实帮助到了很多人 ( ^ w ^ )，这也是我继续更新博客的动力
另外，希望博客互留友链的同学，可以到我的链接下留下你的博客信息 传送门
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。