Colorful Comments (Refreshed)

A maintained fork of Colorful Comments — the original hasn't been updated since 2022. This version stays current with new languages and accepts contributions. If you find it useful, a ⭐️ on the marketplace goes a long way!

Categorise your comments by meaning using annotation tags. Each tag gets its own color, making intent scannable at a glance.

Tag	Color	Default use
!	Red	Alerts, warnings
?	Blue	Questions, unclear logic
*	Green	Highlights, important
^	Yellow	Caveats, assumptions
&	Pink	References, links
~	Purple	Deprecated, revisit
todo	Mustard	Tasks
//	Grey + strikethrough	Commented-out code

All tags, colors, and styles are fully customizable — see Configuration.

---

Configuration

Settings live in User or Workspace settings under the colorful-comments-refreshed prefix.

Setting	Default	Description
multilineComments	true	Style multiline comments with annotation tags
highlightPlainText	false	Detect tags as first character on a line in plain text files
tags	(see below)	Array of tag definitions

Tag schema

Each entry in tags accepts:

{
  "tag": "!",                       // trigger string, or regex pattern if isRegex is true
  "color": "#FF2D00",              // text color
  "backgroundColor": "transparent", // highlight behind text
  "strikethrough": false,
  "bold": false,
  "italic": false,
  "isRegex": false                  // treat tag as a regular expression (see below)
}

Regex tags ✨ new

Set "isRegex": true to match comment annotations with a regular expression instead of a plain string. The tag field is then interpreted as a regex pattern tested against the comment text (after the comment delimiter).

"colorful-comments-refreshed.tags": [
    // plain tags — business as usual
    { "tag": "!", "color": "#e84118" },
    { "tag": "todo", "color": "#ff9f43", "backgroundColor": "#ff9f4320" },

    // regex tags — match dynamic patterns
    { "tag": "INFO:.*",        "color": "#22a6b3", "isRegex": true },
    { "tag": "(FIX):\\s.+",    "color": "#B33771", "isRegex": true }
]

With the config above:

// INFO: this entire comment is colored         ← matches INFO:.*
// FIX: off-by-one in loop bounds               ← matches (FIX):\s.+
// todo  rewrite this later                     ← matches plain "todo" tag

Note: Regex tags are opt-in — existing plain-string tags work exactly as before. Only tags with "isRegex": true are compiled as regular expressions.

the following will yield the same results

[
  // I would recommend:
  { "tag": "(FIX):\\s.+", "color": "#B33771", "isRegex": true },
  // or you could use this: (not recommended)
  { "tag": "FIX", "color": "#B33771", "isRegex": true },
]

Default tags (JSON)

[
  { "tag": "!",    "color": "#FF2D00", "strikethrough": false, "backgroundColor": "transparent", "bold": false, "italic": false },
  { "tag": "?",    "color": "#0076FF", "strikethrough": false, "backgroundColor": "transparent", "bold": false, "italic": false },
  { "tag": "//",   "color": "#474747", "strikethrough": true,  "backgroundColor": "transparent", "bold": false, "italic": false },
  { "tag": "^",    "color": "#EAF622", "strikethrough": false, "backgroundColor": "transparent", "bold": false, "italic": false },
  { "tag": "*",    "color": "#28FF00", "strikethrough": false, "backgroundColor": "transparent", "bold": false, "italic": false },
  { "tag": "&",    "color": "#FF06A0", "strikethrough": false, "backgroundColor": "transparent", "bold": false, "italic": false },
  { "tag": "~",    "color": "#BE00FF", "strikethrough": false, "backgroundColor": "transparent", "bold": false, "italic": false },
  { "tag": "todo", "color": "#FF8C00", "strikethrough": false, "backgroundColor": "transparent", "bold": false, "italic": false }
]

Example: emoji-based tags (@code-instable)

[
  { "tag": "//", "color": "#2C3A47", "strikethrough": true,  "backgroundColor": "transparent" },
  { "tag": "!",  "color": "#e84118", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": "?",  "color": "#0097e6", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": "~",  "color": "#FC427B", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": "*",  "color": "#58B19F", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": "&",  "color": "#22a6b3", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": ">",  "color": "#686de0", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": "$",  "color": "#ff7f50", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": "⚠️", "color": "#ff7f50", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": "💡", "color": "#ff9f43", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": "✅", "color": "#58B19F", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": "🔎", "color": "#5352ed", "strikethrough": false, "backgroundColor": "transparent" },
  { "tag": "❌", "color": "#e84118", "strikethrough": false, "backgroundColor": "transparent" }
]

Example: with Regular Expression matching

"colorful-comments-refreshed.tags": [
    { "tag": "!", "color": "#e84118" },
    { "tag": "?", "color": "#0097e6" },
    { "tag": "//", "color": "#2C3A47", "strikethrough": true },
    { "tag": "todo", "color": "#ff9f43", "backgroundColor": "#ff9f4320" },
    { "tag": "⚠️", "color": "#ff7f50" },
    { "tag": "INFO:.*", "color": "#22a6b3", "isRegex": true },
    { "tag": "(FIX):\\s.+", "color": "#B33771", "isRegex": true },
    ]

---

Supported Languages

See the full list in implemented_languages.md.

Requesting a new language

Open an issue with the language support label.

To speed things up, include the YAML config for your language (lives in src/parser/data/languageConfig.yaml).

Language config reference

Every language builds on a shared base and adds comment-related fields:

base: &base
  supportedLanguage: true
  ignoreFirstLine: false
  isPlainText: false

Field	Type	When to use
delimiter	string	Single-line comment only (e.g. "#" for R, Shell)
commentFormat	string[]	Single + multiline: [single, open, close] (e.g. ["//", "/*", "*/"])
escapeRegExp	string	When the delimiter needs regex-escaping (e.g. "*>" for COBOL)
highlightJSDoc	bool	Enable JSDoc-style highlight
ignoreFirstLine	bool	Skip first line (shebangs, etc.)

TypeScript interface for completeness:

interface LanguageConfig {
  delimiter?: string;
  commentFormat?: string[];
  escapeRegExp?: string;
  highlightJSDoc?: boolean;
  ignoreFirstLine: boolean;
  isPlainText: boolean;
  supportedLanguage: boolean;
}

Examples

Single delimiter — R, Shell, etc.:

hash_delim: &hash_delim
  <<: *base
  delimiter: "#"

Single + multiline — Python:

python_delim: &python_delim
  <<: *base
  commentFormat: ["#", '"""', '""""']
  ignoreFirstLine: true

HTML-style:

html_format: &html_format
  <<: *base
  commentFormat: ["<!--", "<!--", "-->"]

Regex-escaped delimiter — COBOL:

cobol_delim: &cobol_delim
  <<: *base
  escapeRegExp: "*>"

---

Development

Prerequisites

Python 3 with pyyaml, Node.js with npm (or pnpm), and just as the task runner.

just setup            # install vsce, typescript, and dev dependencies

Source of truth

package.yaml is the canonical source for extension metadata — package.json is generated from it and should not be edited by hand. Similarly, language definitions live in src/parser/data/languageConfig.yaml and are compiled to TypeScript.

Build & package

just compile           # generate package.json + languageConfig.ts, then tsc + eslint
just package           # compile + produce .vsix in vsix/

Scripts

All scripts live in scripts/ and are called through just recipes, but can also be run standalone.

Script	Recipe	What it does
convert_packages_yaml.py	just gen-pkg	Converts package.yaml → package.json with round-trip parity check
convert_packages_json.py	—	Reverse direction: package.json → package.yaml (one-time bootstrap)
gen_ts_language_config.py	just gen-ts	Converts languageConfig.yaml → src/languageConfig.ts with typed interface
gen_implemented_languages.py	—	Reads activationEvents from package.yaml and writes implemented_languages.md
sync_package_json.py	—	Interactive: syncs language config → package.json activation events with semver bump prompt

Other recipes

Recipe	Description
just languages	Print all implemented languages from the YAML config
just verify	Regenerate package.json and verify parity with package.yaml
just clean	Remove out/ and vsix/ build artifacts