Why a fork of the original extension ?
Colorful Comments is among my favorite vscode extensions, but has not received a single update since 2022, and the author does not seem active anymore, and thus not adressing issues on the project's repo.
This version aims at staying updated with upcoming and newly released languages or not very popular languages missing from the original package. If you wish to add a language not currently available in the extension, please follow the steps bellow ( section : Adding Language Support ) to submit a proper language support issue on the github repo of this extension
Some changes have been made to make the addition new language support as easy and quickly as possible
Some new features might also come
If you like the effort, please consider rating (⭐️) the extension !
original extension
The Colorful Comments Extension will help you create more human-friendly comments in your code.
With this Extension, you will be able to categorise your cody by special colour into:
- Red (!)
- Blue (?)
- Green (*)
- Yellow (^)
- Pink (&)
- Purple (~)
- Mustard (todo)
- Grey (//)
- Commented out Code can also be Styled to make it Clear the Code shouldn't be There.
- Any Other Comment Styles you'd like can be Specified in the Settings.
Configurations
This extension can be configured in User Settings or Workspace settings.
"colorful-comments-refreshed.multilineComments": true
This setting will control whether multiline comments are styled using the annotation tags.
When false, multiline comments will be presented without decoration.
"colorful-comments-refreshed.highlightPlainText": false
This setting will control whether comments in a plain text file are styled using the annotation tags.
When true, the tags (defaults: ! * ? // ~ & ^) will be detected if they're the first character on a line.
colorful-comments-refreshed.tags
The tags are the characters or sequences used to mark a comment for decoration.
The default 7 can be modifed to change the colors, and more can be added.
See at the very end of the README for config examples.
Supported Languages
One can look for all implemented languages in The following implementation list
Adding Language Support
I can't do everything by myself so feel free when opening an issue to provide the yaml corresponding to your desired language :
(src/parser/data/languageConfig.yaml)
all possible fields :
language_delim: &language_delim
supportedLanguage: true
ignoreFirstLine: false
isPlainText: false
commentFormat: ["//", "/*", "*/"]
highlightJSDoc: false
delimiter: "//"
escapeRegExp: "*>"
languages build upon the base arguments needed, and then add either commentFormat, delimiter or escapeRegExp, you can override properties of the base parameters.
in the end a language config should match the following type (typescript):
interface LanguageConfig {
// must have at least one of these
delimiter?: string;
commentFormat?: string[];
escapeRegExp?: string;
// if needed
highlightJSDoc?: boolean;
// always has a value
ignoreFirstLine: boolean;
isPlainText: boolean;
supportedLanguage: boolean;
}
the base :
base: &base
supportedLanguage: true
ignoreFirstLine: false
isPlainText: false
example of escapeRegExp language : cobol
IDENTIFICATION DIVISION.
PROGRAM-ID. SumArray.
DATA DIVISION.
WORKING-STORAGE SECTION.
01 VEC.
05 ITEM PIC 9 OCCURS 3 TIMES VALUE 1 2 3.
01 SUM PIC 9 VALUE 0.
01 I PIC 9.
PROCEDURE DIVISION.
* this command computes the sum of the vector's components
PERFORM VARYING I FROM 1 BY 1 UNTIL I > 3
ADD ITEM(I) OF VEC TO SUM
END-PERFORM.
DISPLAY "Sum of array elements: " SUM.
STOP RUN.
# this.delimiter = this.escapeRegExp( ... )
cobol_delim: &cobol_delim
<<: *base
escapeRegExp: "*>"
example of language with both simple and multi line comments : python
# this is a single line comment
L = [1,2,3]
"""
this is a multiline comment
"""
sum(L)
python_delim: &python_delim
<<: *base
commentFormat: ["#", '"""', '""""']
ignoreFirstLine: true
or html :
<p>a paragraph</p>
<!-- this won't display
and is multiline
until i end with
-->
<div>how do I center it ?</div>
html_format: &html_format
<<: *base
commentFormat: ["<!--", "<!--", "-->"]
example of language with a single delimiter : r
vec <- c(1,2,3)
# this command computes the sum of the vector's components
sum(vec)
hash_delim: &hash_delim
<<: *base # uses &base as reference values (inherit)
delimiter: "#"
language :
...
r: *hash_delim
...
config examples
original example
"colorful-comments-refreshed.tags": [
{
"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
}
]
another example : allemand-instable
"colorful-comments-refreshed.tags": [
{
"backgroundColor": "transparent",
"color": "#2C3A47",
"strikethrough": true,
"tag": "//"
},
{
"backgroundColor": "transparent",
"color": "#22a6b3",
"strikethrough": false,
"tag": "&"
},
{
"backgroundColor": "transparent",
"color": "#B33771",
"strikethrough": false,
"tag": "%"
},
{
"backgroundColor": "transparent",
"color": "#FD7272",
"strikethrough": false,
"tag": "@"
},
{
"backgroundColor": "transparent",
"color": "#686de0",
"strikethrough": false,
"tag": ">"
},
{
"backgroundColor": "transparent",
"color": "#58B19F",
"strikethrough": false,
"tag": "*"
},
{
"backgroundColor": "transparent",
"color": "#58B19F",
"strikethrough": false,
"tag": "☑️"
},
{
"backgroundColor": "transparent",
"color": "#58B19F",
"strikethrough": false,
"tag": "✅"
},
{
"backgroundColor": "transparent",
"color": "#FC427B",
"strikethrough": false,
"tag": "~"
},
{
"backgroundColor": "transparent",
"color": "#5352ed",
"strikethrough": false,
"tag": "£"
},
{
"backgroundColor": "transparent",
"color": "#5352ed",
"strikethrough": false,
"tag": "🔎"
},
{
"backgroundColor": "transparent",
"color": "#5352ed",
"strikethrough": false,
"tag": "🤔"
},
{
"backgroundColor": "transparent",
"color": "#ff7f50",
"strikethrough": false,
"tag": "$"
},
{
"backgroundColor": "transparent",
"color": "#ff7f50",
"strikethrough": false,
"tag": "⚠️"
},
{
"backgroundColor": "transparent",
"color": "#ff7f50",
"strikethrough": false,
"tag": "🚧"
},
{
"backgroundColor": "transparent",
"color": "#0097e6",
"strikethrough": false,
"tag": "🌐"
},
{
"backgroundColor": "transparent",
"color": "#0097e6",
"strikethrough": false,
"tag": "⚙️"
},
{
"backgroundColor": "transparent",
"color": "#ff9f43",
"strikethrough": false,
"tag": "💡"
},
{
"backgroundColor": "transparent",
"color": "#ff9f43",
"strikethrough": false,
"tag": "✏️"
},
{
"backgroundColor": "transparent",
"color": "#ff9f43",
"strikethrough": false,
"tag": "⭐"
},
{
"backgroundColor": "transparent",
"color": "#576574",
"tag": "δ"
},
{
"backgroundColor": "transparent",
"color": "#e84118",
"strikethrough": false,
"tag": "!"
},
{
"backgroundColor": "transparent",
"color": "#e84118",
"strikethrough": false,
"tag": "❌"
},
{
"backgroundColor": "transparent",
"color": "#0097e6",
"strikethrough": false,
"tag": "?"
}
],
