EN

← All examples

CSS Developer & QA vscode.dev

VS Code Web: highlight TODO/FIXME comments

Highlights lines that contain TODO and FIXME comments with a pastel yellow background (works on github.dev too).

Code to copy

/* Highlight TODO and FIXME comment tokens in the editor (works on github.dev too) */
.monaco-editor .mtk1[style*="italic"],
.monaco-editor span.mtk3,
.monaco-editor span.mtk6 {
  /* Generic comment tokens vary by theme; broaden the catch */
}
.monaco-editor .view-line span:where([class*="mtk"]) {
  --vsc-todo-bg: rgba(255,209,102,0.25);
}
.monaco-editor .view-line:has(span:where([class*="mtk"]):where([title*="TODO"], [title*="FIXME"])) {
  background: rgba(255,209,102,0.08) !important;
  border-left: 3px solid #ffd166 !important;
}

How to use this example

  1. Copy the code with the button above.
  2. Install JustZix (2 minutes) and open the extension on the target page.
  3. Add a new rule matching that page.
  4. Paste the code into the rule's CSS panel and save — the effect appears instantly.

Rate this example

No ratings yet — be the first.

Does this example work?

vscode-webtodocommentshighlight

Related examples

Snippets are useless without somewhere to paste them.

JustZix takes 2 minutes to install and runs your code on every matching page. No account, no payment.

Download free See use cases