Butterfly 自定义代码高亮字体

blog 的 frame 是基于最新版本的 Hexo，theme 用的是 Butterfly 3.8.4 如果环境与我不相同，可能会有一些无法避免的 bug，需要读者自行去修复

Butterfly 自定义代码高亮

这部分内容，在 butterfly 官方文档下有对应教程：自定义代码配色

但是该博客下提供的代码高亮css文件项目已经失效了，既然如此，我这里就再提供一篇较为完整的教程，仅供参考

配置里启用 Highlight

修改 Hexo 根目录下的 _config.yml

代码语言：javascript复制

highlight:
 enable: true
 line_number: true
 auto_detect: false
 tab_replace:
 hljs: true

然后修改 butterfly 主题目录下的配置文件

代码语言：javascript复制

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

代码语言：javascript复制

: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 文件

代码语言：javascript复制

inject:
  head:
    - <link rel="stylesheet" href="/static/css/custom.css">

总结一下当前已经完成了哪些内容：

已经将 hljs 配置设好，接下来会用 hljs 对代码块部分进行渲染
已经完成了对于代码字体高亮的主题配置，接下来代码高亮主题会用 vs2015

配置代码块的样式

我们启动调试功能，看一下现在的代码块长什么样子

可以看到，代码高亮的主题渲染已经完成了，但是代码块的背景很丑，我们按 F12 打开 chrome 的控制台

在 source 里面，找到我们的 custom.css 文件，然后开始对这些参数，边看边调色

chrome 我愿称之为最强前端调试器，实时渲染，类抽象展示，各种功能一应俱全

给懒人准备的我的配色方案，对没错，完全遵循星姐蓝配色 w

代码语言：javascript复制

/* 代码高亮字体 */
: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 等网站都是如此也就是说，可以基于我接下来的实现逻辑，制作一个插件，在各大网站 Code 网站上实现代码字体的更改的功能不过有这功夫，相信大家肯定还是更喜欢配置更美化的本地开发环境 w

在 custom.css 文件中，我们给 code 这个标签强制覆盖上一层字体样式，即可实现代码块字体改变

代码语言：javascript复制

#article-container pre, #article-container code {
  font-family:Fira Code!important;
}

这里我用的字体是 Fira Code，也就是著名的连体字符（例如：如果打出 >= 会渲染成 >= 等）

因此 Fira Code 显然不是电脑本地自带的，我这里就附带教一下如何引入你想要的字体

先去 GitHub 上找到你想要的的字体项目，我这里就拿 Fira Code 为例，进入到该项目页传送门

翻到最下面的 Browser support 里，会告诉你他的 CDN 文件地址，直接引入你的 css 文件里即可

引入后，我们就可以捕获整个项目里的任意 html 标签，然后修改他的字体，包括但不限于主副标题，代码块，正文等

以我为例，我修改了主副标题、小字、代码块以及文章标题，如下：

代码语言：javascript复制

/* 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 ^ )，这也是我继续更新博客的动力

另外，希望博客互留友链的同学，可以到我的链接下留下你的博客信息传送门

css 编程算法渲染 hexo

0 人点赞