Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simon-he95/vscode-highlight-text
自定义配置任意语言的高亮语法，比如 vue、react、svelte、solid 等，你可以强调突出一些特定的语法或者事件，让你更加容易阅读代码也可以让你的编辑器看上去更与众不同
https://github.com/simon-he95/vscode-highlight-text
highlight vscode vscode-extension vscode-highlight-text
Last synced: 10 days ago
JSON representation
自定义配置任意语言的高亮语法，比如 vue、react、svelte、solid 等，你可以强调突出一些特定的语法或者事件，让你更加容易阅读代码也可以让你的编辑器看上去更与众不同
- Host: GitHub
- URL: https://github.com/simon-he95/vscode-highlight-text
- Owner: Simon-He95
- License: mit
- Created: 2024-02-23T13:59:13.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-10T03:36:50.000Z (about 2 months ago)
- Last Synced: 2024-09-17T01:54:10.599Z (about 2 months ago)
- Topics: highlight, vscode, vscode-extension, vscode-highlight-text
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=simonhe.vscode-highlight-text
- Size: 270 KB
- Stars: 75
- Watchers: 4
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
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](https://github.com/Simon-He95/vscode-highlight-text/issues/5)
```json
{
"vscode-highlight-text.rules": {
"vue|react|typescript": {
"light": {
"purple": {
"match": [
"v-if",
"v-else-if",
"v-else"
],
"before": {
"contentText": "✨"
}
},
"#B392F0": [
"v-for"
],
"#FFC83D": [
"=]+)",
"\\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": [
"=]+)",
"\\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": [
""
],
"#10b2ca": {
"match": [
"^\\s*//\\s*([0-9]+[.)、])"
]
},
"#1a5d70": {
"match": [
"^\\s*//[^\u4e00-\u9fa5\\n]*([\u4e00-\u9fa5,. ]+)[^\\n]*"
]
},
"#6d6d6d": {
"match": [
"()",
"^\\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`
```json
{
"react|typescript|javascript": {
"light": {},
"dark": {}
}
}
```
### 2. You can set different styles for multiple match items in a regular rule
- Example 1:
```md
"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:
```md
"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
```md
"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
```md
"red": ["[0-9]+","gm"]
```
## Show your style
- You can share the style you think is cool [here](https://github.com/Simon-He95/vscode-highlight-text/issues/5), or you can submit PR as a built-in template style selection Make it available to more people.
## :coffee:
[buy me a cup of coffee](https://github.com/Simon-He95/sponsor)
## License
[MIT](./license)
## Sponsors
