输出颜色,输出 Nerd Font 中的图标,以美化自己的终端

最近在捣鼓在Windows Terminal上的WSL的Ubuntu上使用oh-my-posh美化终端。
(插一句嘴:在powershell上使用这个实在是太慢了,不喜欢)
对于oh-my-posh的美化效果,我最感兴趣的是终端究竟是如何输出如此多彩的行指示信息以及哪些特殊的形状是如何输出的?
这篇文章不会提及具体的oh-my-posh的安装教程,如果你在读完这篇文章之后需要美化你自己的终端,请参考oh-my-posh的官方网站,其中有非常详细的安装教程
oh-my-posh官网:https://ohmyposh.dev/


🎨颜色部分

这个很好理解,对于大多数的终端或代码输出都支持颜色的输出
有少部分代码彩色输出的原理使用到了系统的API
但也有相当一部分是ANSI 转义序列(ANSI Escape codes)

ANSI 转义序列(ANSI Escape codes)是一种带内信号(In-band signaling)的转义序列标准,用于控制视频文本终端上的光标位置、颜色和其他选项。在文本中嵌入确定的字节序列,大部分以 ESC 转义字符和 [ 字符开始,终端会把这些字节序列解释为相应的指令,而不是普通的字符编码。

💻终端
终端类型是否支持代码形式原理
cmd使用 color 或 findstrfindstr会高亮找到的文本
pwshWrite-Host “OK” -ForegroundColor:Green -NoNewlineWrite-Host命令允许设置颜色
zshecho $‘\e[1;31m文本’ANSI 转义序列
bashecho $‘\e[1;31m文本’ANSI 转义序列
🔧语言
语言类型是否支持代码实现原理
C/C++ on WindowsSetConsoleTextAttribute通过系统API设置控制台颜色属性
JavaANSI 转义序列
Node.jsANSI 转义序列
PythonANSI 转义序列

🎨图标部分

如图,我们可以看见在Windows Terminal中的终端,在输入行能够输出各种多彩而有实际作用的信息,同时通过一些特殊图标的点缀,从而达到美化终端的目的。
使用了oh-my-posh之后的终端中的图标
那么这些图标究竟是如何显示的呢?

🔤字体

在安装oh-my-posh时,如果没有安装指定的字体,就会导致这些图标无法正常显示。那么很明显,这些图标便是存储在字体当中的“一个字符”。

各个系统或环境中字体的安装方式不同,但最重要的一步总是下载推荐使用的Nerd Font字体。这个Nerd Font包含了普通的英文字体之外,还包含了各种各样的图标。

Nerd Font官网:https://www.nerdfonts.com/
引用官网首页中的图片来表示Nerd Font所包含图标数量之多
既然我们明白这些"图标"只不过是一个字符而已,那么我们就可以用输出字符的方式来输出这些图标到你的终端。

🔍搜索图标

这些字符的具体编码,你可以在官网提供的图标搜索栏中搜索你需要的图标,或是显示所有图标来寻找你想要使用的图标。
Nerd Font官网图标搜索

由于nf(Nerd Font)中含有太多的图标,对于我们图标的使用和一览带来了极大的麻烦。所以即使是使用官网提供的搜索栏也会有一定的困难。不过官网以及为我们将图标分好了类,注好了名,我们只需要一定的搜索技巧即可。

搜索界面
首先所有的图标都由nf-开头,代表这是属于Nerd Font 中可用的

其次是子图标集的名称,比如nf-weather就代表了图表中的天气符号
下表是各个子图标集以及其搜索名称

图标集搜索名称前缀图标内容
Powerline Symbolsnf-pl用于美化输入行最基础的符号
Powerline Extra Symbolsnf-ple上者的扩展集,包含更多形状
Font Awesomenf-fa包含商标、箭头等
Font Awesome Extensionnf-fae上者的扩展集,水果、器官等
Deviconsnf-dev开发环境或系统的图标
Weather Iconsnf-weather天气相关图标
Seti UInf-seti部分编程语言或工具的图标
customnf-custom上者的部分追加,更多语言的图标
Octiconsnf-oct箭头,文件,浏览器相关图标
Font Logosnf-linuxLinux相关图标,各种系统的图标
IEC Power Symbolsnf-iecIEC电源图标
Pomiconsnf-pom包含几个图标,主要是各种番茄
Material Designnf-mdi比较大的图标集,包含各种各样的图标
Codiconsnf-cod比较大的图标集,包含各种各样的图标
Indentnf-indent几个缩进线图标

然后是图标名称,比如你想搜"心",你输入"heart"即可
搜索结果示意
这样你就能找到或者遇到你想要输出的图标了

📝输出

当你找到你要输出的图标后,将你的鼠标移动到图标上能够看见COPY中的三个选项,单击这些选项会复制不同的内容
三个选项
首先是Icon,意思为直接复制该字符。此时如果你直接将其粘贴到没有使用Nerd Font的地方,多半就只会显示一个方框。但是如果粘贴到使用了Nerd Font的地方,就会直接显示这个图标啦
描述
其次是Class,意思为复制该图标的名称,比如nf-oct-terminal之类的。这个的用处是在浏览器中使用,比如

I really <i class="nf nf-fa-heart"></i> <i class="nf nf-custom-vim"></i>

在浏览器中使用
最后是Hex,意思为复制该图标编码的十六进制值。这个的用处是在别处输出该字符,这里我举一个C语言中的例子。

printf("\uf489");

就可以在使用了Nerd Font的终端输出该字符了


✅实例

这里我举一个Python中的例子

import subprocess

if __name__ == "__main__":
    cmd = ""
    print("using Python 3.9.7")
    while True:
    	#这里的\u001b是ANSI 转义序列
    	#这里的\ue0b6等是NerdFont图标
        print("\u001b[35;40m\ue0b6", end="")
        print("\u001b[37;45m username ", end="")
        print("\u001b[35;40m\ue0b0", end="")
        print("\u001b[30;46m\ue0b0", end="")
        print("\u001b[30;36m path ", end="")
        print("\u001b[36;40m\ue0b0", end="")
        print("\033[0m", end="")
        cmd = input()
        subprocess.Popen(cmd, shell=True, stdout=None, stderr=None).wait()

运行结果:
运行结果
这样,我们就能够自己美化自己的终端了

在达到文章效果之前,你还需要做以下的事情

  1. 安装Windows Terminal
  2. 下载一种Nerd Font
  3. 在Windows Terminal配置中使用一种Nerd Font
  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Hack Nerd Font是一种非常流行的开源编程字体,它拥有许多变体和形式。以下是Hack Nerd Font的一些样式: 1. Hack Regular:这是Hack Nerd Font的标准版本,它拥有清晰的直线和锐利的角度。 2. Hack Italic:这个版本是将Hack Regular的形式倾斜,使其更具有视觉诱人性。 3. Hack Bold:Hack Bold拥有更加粗壮的线条和更加浓重的笔画,使得字体更容易被注意到。 4. Hack Bold Italic:这个版本是将Hack Bold的形式倾斜,使其更具有强烈的视觉效果。 5. Hack Regular Nerd Font:这个版本与Hack Regular类似,但是它还包含了各种编程符号的图形插件,从而为用户提供更加完整的编程环境。 6. Hack Bold Nerd Font:与Hack Bold类似,但包含编程符号图形插件。 除此之外,还有许多其他Hack Nerd Font的变体和形式,比如InconsolataGo, JetbrainsMono, FiraCode等等,每一种都有其独特的特点和特色。 ### 回答2: Hack Nerd Font是一款非常流行的开源编程字体,适用于多种操作系统和编程语言。该字体与其他字体相比,具有更好的阅读性和可视性,特别适合开发人员和程序员使用。 Hack Nerd Font提供了多种字体类型,包括Regular、Italic、Bold和Bold Italic。此外,还提供了一系列的符号和图标,包括各种箭头、运算符、括号、增量符号、特殊字符等等。这使得Hack Nerd Font成为一种非常流行的编程字体选择。 此外,Hack Nerd Font还提供了多种尺寸和风格的字体,方便开发人员根据自己的喜好和需要进行选择。无论是在黑背景还是白背景下,都可以轻松地使用Hack Nerd Font编写代码和进行程序开发。 总之,Hack Nerd Font是一种非常实用的编程字体,为开发人员提供了更好的阅读体验和代码可视性,提高了开发人员的工作效率和代码质量。 ### 回答3: Hack Nerd font是一种面向程序员的等宽字体,设计了多种字重和斜体,以适应各种编码环境和显示格式。这种字体特别适合用于编写程序、终端会话、文本编辑和代码排版等领域。 目前,Hack Nerd font已经推出了多个版本,包括: 1. Hack Regular font:普通字重的Hack Nerd字体。 2. Hack Bold font:粗体的Hack Nerd字体。 3. Hack Italic font:斜体的Hack Nerd字体。 4. Hack Bold Italic font:粗斜体的Hack Nerd字体。 除此之外,Hack Nerd font还衍生出了一些变种字体,如Hack Nerd Font Complete、Hack Nerd Font Mono、Hack Nerd Font Tight等等。这些字体在Hack Nerd font基础上,加入了更多的特色和风格,可以满足不同用户的需求。 总之,Hack Nerd font是一款多变、多样的字体,为程序员们提供了丰富的选择,使得他们的编码体验更加美好和高效。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值