240207-3步设置VSCode插件Inline-Bookmarks自定义颜色及名称

Step 1: 插件安装

Step 2: 配置文件

bash 复制代码
"inline-bookmarks.expert.custom.styles": {
    


    "default": {
        "gutterIconColor": "#157EFB",
        "overviewRulerColor": "rgba(21, 126, 251, 0.7)",
        "light": {
            "fontWeight": "bold"
        },
        "dark": {
            "color": "Chocolate"
        }
    },
    "red": {
        "gutterIconColor": "#FFFFFF",
        "light": {
            "fontWeight": "bold"
        },
        "dark": {
            "color": "Chocolate"
        }
    },
    "orange": {   // example custom style with yellow color
        "gutterIconColor": "#FF4500",
        "overviewRulerColor": "#FF4500B0",
        "light": {
            "fontWeight": "bold"
        },
        "dark": {
            "color": "Chocolate"
        }
    },
    "yellow": {
        "gutterIconColor": "#FFFF00",
        "light": {
            "fontWeight": "bold"
        },
        "dark": {
            "color": "Chocolate"
        }
    },
    "green": {
        "gutterIconColor": "#2FCE7C",
        "light": {
            "fontWeight": "bold"
        },
        "dark": {
            "color": "Chocolate"
        }
    },
    "blue": {
        "gutterIconColor": "#157EFB",
        "light": {
            "fontWeight": "bold"
        },
        "dark": {
            "color": "Chocolate"
        }
    },
    "indigo": {   // example custom style with yellow color
        "gutterIconColor": "#4B0082", 
        "light": {
            "fontWeight": "bold"
        },
        "dark": {
            "color": "Chocolate"
        }
    },
    "purple": {
        "gutterIconColor": "#C679E0",
        "light": {
            "fontWeight": "bold"
        },
        "dark": {
            "color": "Chocolate"
        }
    },
    "warn": {   // example custom style with yellow color
        "gutterIconColor": "#FF4500",
        "overviewRulerColor": "#F4F400B0",
        "light": {
            "fontWeight": "bold"
        },
        "dark": {
            "color": "Chocolate"
        }
    },
    
    
},
"inline-bookmarks.expert.custom.words.mapping": {


    "red": ["@header1[ \\t\\n]"],
    "orange": ["@header2[ \\t\\n]"], 
    "yellow": ["@header3[ \\t\\n]"], 
    "green": ["@header4[ \\t\\n]"],
    "blue": ["@header5[ \\t\\n]"],
    "indigo": ["@header6[ \\t\\n]"],
    "purple": ["@header7[ \t\\n]"],
    "warn": ["@warn[ \\t\\n]"], 
},
"inline-bookmarks.view.words.hide": true,
"inline-bookmarks.view.expanded": true

Step 3: 实现效果

相关推荐
QQRRRRW1 天前
Tailwind+VScode (Vite + React + TypeScript) 原理与实践
vscode·react.js·typescript
_OP_CHEN1 天前
前端开发实战深度解析:(一)认识前端和 HTML 与开发环境的搭建
前端·vscode·html·web开发·前端开发
charlie1145141911 天前
利用WSL + VSCode + ESP-IDF6开发ESP32系列单片机指南
ide·vscode·单片机·esp32·wsl·指南·工程
0欧姆2 天前
VScode 创建 QNX 模板工程
ide·vscode·编辑器
阿波茨的鹅2 天前
VSCode C++ 项目配置教程
c++·ide·vscode
凌晨一点的秃头猪3 天前
VScode 添加远程服务器教程
ide·vscode·编辑器
Hi_kenyon3 天前
使用vim来完全控制你的VSCode(一)
vscode·编辑器·vim
天地之于壹炁兮3 天前
用VSCode打造高效AI开发环境:从配置到实战
ide·人工智能·vscode
卓小帅的博客3 天前
关于实现远程服务器使用本地网络的清晰简洁的教程
服务器·网络·vscode·连接超时
电子_咸鱼3 天前
【STL string 全解析:接口详解、测试实战与模拟实现】
开发语言·c++·vscode·python·算法·leetcode