24

I need to have my vscode highlight specific words so I can leave different notes in the code and easily see them when I need to, for example: Note: with the color green and DEBUG with color red and so on.

Improve this question
1
  • 3
    Also look at the Highlight extension, see marketplace.visualstudio.com/…. It has the advantage of using multiple capture groups on a line and separately styling those if you desire. Although it doesn't sound like you are looking for that...yet. Commented Oct 1, 2019 at 1:40

3 Answers 3

Reset to default
40

UPDATE Jun/2023 Thanks to Andre Greeff for his comment:

quick 2023 update: the original "TODO Highlight" by Wayou has not seen any updates since 2019 and appears as though it may be abandoned. For anybody visiting this going forward, you should check out "TODO Highlight V2", maintained by Jonathan Clark.

All the instructions and keywords should work the same. I'll be testing them and if I find any changes I'll update this post accordingly.
Cheers!🍻

Edit Jun/2022 I've added both "todohighlight.include" and "todohighlight.exclude" keys with some sample values for, files/file name patterns, to include and exclude on the highlighting. Cheers!🍻

Edit Jun/2021 It's been a while since I published this post. I've updated the sample for more detailed highlighting. Post your comments down below if you need clarifications. Cheers!🍻

Download and install TODO Highlight extension. After you download and installed the extension, make sure you restart your VS Code. Now please follow the following steps in order to add custom keyword highlighting in your code.

  • On windows hold down Ctrl + Shift and on mac Command + Shift, then press the key P.

a command line opens up.

  • On the command line type "open settings" and click on "Preferences: open settings".

Settings window will open.

  • under the "search setting" input on the right-handside look for the three dots "..." and click on it.

  • Click on "Open settings.json".

"User Settings" tab will open. It contains a split screen window. On the left side you see the default settings and on the right side you see the user settings

  • in the "search settings" type "todohighlight.keywords"

you will see "todohighlight.keywords": [].

  • Hover over it with your mouse

a little pen will show up on its left side

  • click on it

you'll see a drop-down select menu opens.

  • click on "Replace in settings".

You can now see "todohighlight.keywords": [] in the right panel window (USER SETTINGS).

This is an array that contains JSON objects such as following:

"todohighlight.keywords": [ { "text": "todo:", "color": "#000000", "backgroundColor": "DarkKhaki", "overviewRulerColor": "DarkKhaki", "border": "1px solid DarkKhaki", "borderRadius": "3px", "isWholeLine": false }, { "text": "note:", "color": "#000000", "backgroundColor": "#72824E", "overviewRulerColor": "#72824E", "border": "1px solid #72824E", "borderRadius": "3px", "isWholeLine": false }, { "text": "System.debug", "color": "#000000", "backgroundColor": "STEELBLUE", "overviewRulerColor": "STEELBLUE", "border": "1px solid STEELBLUE", "borderRadius": "3px", "isWholeLine": false }, { "text": "system.debug", "color": "#000000", "backgroundColor": "STEELBLUE", "overviewRulerColor": "STEELBLUE", "border": "1px solid STEELBLUE", "borderRadius": "3px", "isWholeLine": false }, { "text": "console.log", "color": "#000000", "backgroundColor": "STEELBLUE", "overviewRulerColor": "STEELBLUE", "border": "1px solid STEELBLUE", "borderRadius": "3px", "isWholeLine": false }, { "text": "|DEBUG|", "color": "#000000", "backgroundColor": "#72848A", "overviewRulerColor": "#72848A", "border": "1px solid #72848A", "borderRadius": "3px", "isWholeLine": true }, { "text": "attention:", "color": "white", "backgroundColor": "red", "border": "1px solid red", "borderRadius": "3px", "isWholeLine": false }, { "text": "debug:", "color": "white", "backgroundColor": "red", "border": "1px solid red", "borderRadius": "3px", "isWholeLine": false } ], "todohighlight.include": [ "**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "**/*.html", "**/*.php", "**/*.css", "**/*.scss" ], "todohighlight.exclude": [ "**/node_modules/**", "**/bower_components/**", "**/dist/**", "**/build/**", "**/.vscode/**", "**/.github/**", "**/_output/**", "**/*.min.*", "**/*.map", "**/.next/**" ]

If you're not familiar with JSON notation copy the content of "todohighligh.keywords" from the sample above and past it to your "user settings" window in between the two [] brackets. You can change the values on the left side of : colon in between "" double quotes. If you would like to add more than two keywords simply add a comma after the last closing curly bracket } in your "user settings" and copy/past one JSON object (which is from one { open bracket to the first closing } bracket) and then change its content. You can add as many keywords as you'd like to.

MAKE SURE YOU SAVE THE FILE by holding down Ctrl (Windows) / command (Mac) and press the key "s" or from the menu bar go to File -> Save

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

These are great instructions. They were very thorough and helped me a lot
Is there a way to limit this highlighting behavior only on some files? E.g. I would like to only highlight these words in ".log" extension files.
@kocica, yes it's possible and I've updated the sample json with the two new keywords. I hope it helps. Thanks!
quick 2023 update: the original "TODO Highlight" by Wayou has not seen any updates since 2019 and appears as though it may be abandoned.. for anybody visiting this going forward, you should check out "TODO Highlight V2", maintained by Jonathan Clark.
4

My answer may not apply your scene, but if someone wants to highlight any word,I prefer this plugin:

enter image description here

The following options can be configured

highlightwords.colors: this is an array of light/dark pairs for respective theme types, you can have as few or as many as you like highlightwords.box: show highlights as a box around the selections if true, set highlight as background color if false highlightwords.defaultMode: the initial mode when initialized. 0=default, 1=whole word, 2=ignore case, 3=whole word and ignore case highlightwords.showSidebar provides a view in the explorer window for searching, changing options and removing highlights
Improve this answer

2 Comments

Could you provide a link instead of just a screenshot?
github.com/rsbondi/highlight-words
1

Very useful extension is Text Marker (Highlighter)

https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker

Features:

  • Highlight/Unhighlight text from both command palette or right-click menu
  • Update existing highlight rules from the right-click menu
  • Jump to the next/previous location of the same highlighted pattern
  • Highlight text using a regular expression
  • Case sensitive/insensitive text matching
  • Whole/Partial text matching
  • Highlighting colour is configurable
  • Save highlights that will be restored next time you open the editor Highlight/Unhighlight text.
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.