给你的代码块添加VSCode样式的图标

@Pelom  November 13, 2021

前言

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

步骤

  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

引用


添加新评论