vscode-highlight-text - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #llm #go #machine-learning #deep-learning #linux #macos #nodejs #awesome #awesome-list #security #open-source

vscode-highlight-text

(★ 87)

自定义配置任意语言的高亮语法，比如 vue、react、svelte、solid 等，你可以强调突出一些特定的语法或者事件，让你更加容易阅读代码也可以让你的编辑器看上去更与众不同

File Explorer

Download Latest Version (.zip)

- - ci.yml
  - release.yml
- FUNDING.yml
- extensions.json
- launch.json
- settings.json
- tasks.json
- demo.jpg
- - index.ts
  - test.ts
- config.ts
- decorations.ts
- index.ts
- regex-worker.ts
- regex.ts
- runtime-control.ts
- scheduler.ts
- type.ts
- - vscode.ts
- activation.test.ts
- production.test.ts
- setup.ts
.gitignore
.npmrc
.vscodeignore
eslint.config.js
icon.png
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
README_zh.md
TEST_DOCUMENTATION.md
tsconfig.json
tsup.config.ts
vitest.config.ts

# Installation Guide

1. Get the code

git clone https://github.com/Simon-He95/vscode-highlight-text

Downloads the entire project code from GitHub to your computer.

cd vscode-highlight-text

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
<img height="200" src="./icon.png" alt="vscode-highlight-text">
</p>
<p align="center"> English | <a href="./README_zh.md">简体中文</a></p>

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.

![demo](https://raw.githubusercontent.com/Simon-He95/vscode-highlight-text/main/assets/demo.jpg)

## 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)
>
> Compatibility note: use `backgroundColor` for highlight colors. The legacy `background` field remains as a deprecated alias for color values, but CSS gradients, images, and shorthand values are no longer supported.

```json
{
  "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*(//[^\\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": [":is"],
   "ignoreReg": [
    "`[^`]*`" // Ignore matches inside inline code in the scanned context
   ]
   ```

### 4. Support RegExp flags passing
  ```md
   "red": [["[0-9]+", "gm"]]
   ```

## Performance and limits

Large files, expensive regular expressions, and unusually large rule sets may be limited automatically to keep the VS Code Extension Host responsive. Time-limited scans continue from the next unprocessed rule, and limit or configuration problems are reported through VS Code warning messages.

Highlighting uses visible-scope scanning. Each regular-expression input contains a visible range plus at most 20 physical lines of context on each side; multiple visible ranges share a total limit of 200,000 UTF-16 code units. Both `match` and `ignoreReg` are limited to that input, so expressions that require more distant context—such as long Markdown fences, long HTML comments, folded structures, or file-start anchors—are not guaranteed to receive complete document semantics.

For React aliases, overlap priority is deterministic: the exact language (`javascriptreact` or `typescriptreact`) wins over its sibling alias, which wins over generic `react`.

## 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

<p align="center">
  <a href="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.svg">
    <img src="https://cdn.jsdelivr.net/gh/Simon-He95/sponsor/sponsors.png"/>
  </a>
</p>