什么是 fira code 字体

  Fira 是由 Mozilla 公司（也就是火狐浏览器的母公司）主推的字体系列，主打的就是具有 等宽 的属性。而 Fira Code 则在这一基础上加入了 编程连字特性，也就是 Ligatures。
Fira Code 利用这一特性，对编程人员常用的一些编程符号做了连字处理，将我们经常用到的诸如 =>、<=、!= 等超过一个字符的操作符渲染为对应的数学符号，使得我们能够更快地阅读理解代码。

效果预览

未渲染前：

  • 未渲染前

渲染后：

1
2
3
4
5
6
7
8
9
10
11
12
13
const func = (arr: Array<any>) => {
    for (let i = 0; i <= arr.length; i++) {
        let item = arr[i];
        if (typeof item === 'number') {
            while (item >= 10) {
                item /= 10; // 只是为了演示效果，别在意代码效率了...
            }
            console.log(`${arr[i]} ${item % 1 != 0 ? '不能' : '可以'} 被 10 整除`);
        }
    }
};
const arr = [1, 30, 24, 'afaa', undefined, 50];
func(arr);

butterfly代码框添加FiraCode字体

  1. 修改_config.butterfly.yml找到inject项添加入下代码：

    1
    2
    3
    inject:
      head:
        - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css"> #引入fira_code代码字体

  2. 自定义引入的custom.css文件添加如下代码：

    1
    2
    3
    4
    5
    6
    /*代码框 字体设置*/
    #article-container pre {
    	padding: 1px 3px;
    	margin: 0 3px;
    	font-family: 'Fira Code', monospace !important;
    }

    隶属于文章hexo 博客 butterfly 主题安装及魔改笔记