前言

计算机通过文件的后缀名识别文件类型，而对于我们人类来说，抽象化的图标才更直观
在vscode的资源管理器中，文件名的左侧就有这样的一系列图标，它们由文件的后缀名决定。有些特殊的文件（如README.md、LICENSE）也会有特殊的图标，能让人快速定位到它们
在网页上，我们也可以为代码块标记语言类型，让文章的结构更加清晰

步骤

1. 在Microsoft官网的vscode文档中可以查到，这些图标是seti字体，我们可以在vscode的github仓库中找到对应的seti.woff（网页开放字体格式）文件和对照表vs-seti-icon-theme.json

2. 当我们使用markdown书写代码时，语法是这样的

   \`\`\`language
   code
   \`\`\`

   将language替换为对应的语言（以cpp为例），markdown的解释器就会将这一块替换为

   <pre>
       <code class="lang-cpp">
           int main(){
               
           }
       </code>
   </pre>

   网页上显示为

   int main(){
       
   }

   可见给.lang-cpp类添加样式即可

3. 引入seti.woff字体

   @font-face{
       font-family: seti;
       src: url('./seti.woff');
   }

   设计基础样式及默认图标，图标及颜色查阅vs-seti-icon-theme.json可得
   使用伪类来添加图标，这样不用对原文档结构做任何改动

   pre{
       position: relative;
       padding: .8rem;
       font-size: 1rem;
       border-left: .2rem solid crimson;
       background: #f8f8f8
   }
   pre>code{
       padding: 0.5em;
       display: block;
       background: #fafafa
   }
   pre> ::before{
       content: '\E023';
       color: #519aba;
       font-family: seti;
       font-size: 1.4rem;
       text-align: center;
       position: absolute;
       width: 2rem;
       height: 2rem;
       left: -1.1rem;
       background: #fafafa;
       border-radius: 1rem;
       outline: .1rem solid crimson;
   }

   再对每种语言设置图标及颜色，需要注意css选择器的优先级，让它能覆盖掉默认样式

   .lang-cpp::before{
       content: '\E01A';
       color: #519aba;
   }

   其他语言同理

4. 在文档中引入刚才编写的css并将seti.woff放在同一目录下即可显示图标

示例

default

html

css

js
javascript

json

c

cpp

java

py
python

md
markdown

php

cs
csharp

r
R

go
Go

swift

vue

sql

ts
typescript

xml

yml

powershell

引用

• vscode theme-seti