Vscode Highlight Text
自定义配置任意语言的高亮语法，比如 vue、react、svelte、solid 等，你可以强调突出一些特定的语法或者事件，让你更加容易阅读代码也可以让你的编辑器看上去更与众不同
English | 简体中文
Customize the highlight syntax of any language, such as vue, react, svelte, solid, etc. You can emphasize some specific syntax or events, make it easier for you to read the code and make your editor look more unique. If you think your matching style is cool, welcome to mention pr, which can be used as a built-in template style for more people.
Configuration
⚠️ Please note that the following indicates the type of configuration. For more information on how to configure, please refer to shared rules
{
"vscode-highlight-text.rules": {
"vue|react|typescript": {
"light": {
"purple": {
"match": [
"v-if",
"v-else-if",
"v-else"
],
"before": {
"contentText": "✨"
}
},
"#B392F0": [
"v-for"
],
"#FFC83D": [
"<template\\s+(\\#[^\\s\\/>=]+)",
"\\s+(v-bind)",
"\\s+(v-once)",
"\\s+(v-on)",
"\\s+(v-slot:[^>\\s\\/>]+)",
"\\s+(v-html)",
"\\s+(v-text)"
],
"rgb(99, 102, 241)": [
":is"
],
"rgb(110,231,183)": [
"(defineProps)[<\\(]",
"(defineOptions)[<\\(]",
"(defineEmits)[<\\(]",
"(defineExpose)[<\\(]"
]
},
"dark": {
"#fae88e": {
"match": [
"^\\s*(?:export)?\\s*(type)\\s+",
"^\\s*(?:export)?\\s*(interface)\\s+"
]
},
"#d798da": {
"match": [
"(?:=|^)\\s*(function) +(\\w*)"
],
"colors": [
"#d798da",
"#c7fff9"
]
},
"#d9ceff": {
"match": [
[
"^\\s*import\\s.*\\sfrom (['\"][^\\.~'\"][^\"']+['\"])",
"gm"
]
]
},
"#c7fff9": {
"match": [
"^\\s*import\\s.*\\sfrom (['\"][\\.~\/][^\"']+['\"])"
]
},
"#cfe9c9": {
"match": [
"^\\s*import\\s+(['\"][^\"']+['\"])"
]
},
"purple": {
"match": [
"\\s(v-else-if)=",
"\\s(v-if)=",
"\\s(v-else)\\s"
],
"before": {
"contentText": "✨"
}
},
"#B392F0": {
"match": [
"\\s+(v-for)="
]
},
"#FFC83D": [
"<template\\s+(\\#[^\\s\\/>=]+)",
"\\s+(v-bind)",
"\\s+(v-once)",
"\\s+(v-on)",
"(v-slot:[^>\\s\\/>]+)",
"\\s+(v-html)",
"\\s+(v-text)"
],
"rgb(99, 102, 241)": {
"match": [
":is"
],
"ignoreReg": [
"`[^`]*`"
]
},
"#8589cf": [
"(defineProps)[<\\(]",
"(defineOptions)[<\\(]",
"(defineEmits)[<\\(]",
"(defineExpose)[<\\(]"
],
"#174e3a": [
"<(template)[^>]*>",
"<\/(template)>"
],
"#4d4c87": [
"<(script)[^>]*>",
"<\/(script)>"
],
"#724485": [
"<(style)[^>]*>",
"<\/(style)>"
],
"id": {
"match": [
"\\s+(id)="
],
"before": {
"contentText": "🆔"
}
},
"key": {
"match": [
"\\s+(key)="
],
"before": {
"contentText": "🫧"
}
},
"#f08b47": [
"// TODO:.*"
],
"#c41f0a": [
"// IMPORTANT:.*"
],
"#6c09ce": [
"<script.*lang=\"(\\w+)\">"
],
"#10b2ca": {
"match": [
"^\\s*//\\s*([0-9]+[.)、])"
]
},
"#1a5d70": {
"match": [
"^\\s*//[^\u4e00-\u9fa5\\n]*([\u4e00-\u9fa5,. ]+)[^\\n]*"
]
},
"#6d6d6d": {
"match": [
"(<!--[\\s\\S]*?-->)",
"^\\s*(//[^\\n]*)"
]
}
}
}
}
}
Feature
1. You can apply the same configuration to multiple type files separated by |. The following example is a common configuration for react, typescript, and javascript
{
"react|typescript|javascript": {
"light": {},
"dark": {}
}
}
2. You can set different styles for multiple match items in a regular rule
- Example 1:
"match": ["(function)\\s+([\\w]*)"], this regular match matches `match1: function` and `match2: functionName`
"colors": ["red", "yellow"], this colors can set match1 to red and match2 to yellow
Example 1 is just a convenient use of color. If you want more attributes, you can refer to Example 2.
- Example 2:
"match": ["(function)\\s+([\\w]*)"], this regular match matches `match1: function` and `match2: functionName`
"matchCss": [{
"color": "red",
"before": {
"contentText": "✨"
}
},{
"color": "yellow"
}]
3. You can use ignoreReg to filter unwanted content
"match": ["(function)\\s+([\\w]*)"], this regular match matches `match1: function` and `match2: functionName`
"ignoreReg": [
"```([^`])+``` "// I don’t want the content of match to be between ``` and ```
]
4. Support RegExp flags passing
"red": ["[0-9]+","gm"]
Show your style
- You can share the style you think is cool here, or you can submit PR as a built-in template style selection Make it available to more people.
:coffee:
License
Sponsors
