I want to create custom tag only for better visual experience.
like in php if we use comment tag,
/*
comment 1
comment 2
comment 3
*/
it change the color coding.
Similarly I want to create a tag like
// log start
executable code here...
but should look like comment or blur
// log end
I know this is weird but if there anything in vscode settings or any custom plugin or any extension will be helpful
You can use the Highlight extension to achieve this. You can set up custom regexes and apply specific styles to code that matches those regexes.
Install the extension, add this as a custom regex:
"(// log start(.|\\n)+?// log end)": {
"decorations": [
{
"overviewRulerColor": "#ffcc00",
"backgroundColor": "#ffcc00",
"color": "#1f1f1f",
"fontWeight": "bold"
}
]
}
Obviously, replace the colors with what you want. This is what it looks like with my settings:
Try this (depending on your colors:
"highlight.regexes": {
"([ \\t]*// log start)([\\S\\s]+?)([ \\t]*// log end)": {
"decorations": [
{
"backgroundColor": "#fff9",
"color": "#0006",
"letterSpacing": "4px",
"after" : {
"fontWeight": "bold",
"contentText": "\u2003\u2003\u2003\u2003\u2003\u274d",
"color": "black"
}
},
{
"color": "#0006",
"fontWeight": "bold"
},
{
"backgroundColor": "#fff9",
"color": "#0006",
"letterSpacing": "4px",
}
]
}
}
Here the parts are separately captured so you can do different things with them:
