How do I set up comment highlighting in CSS?

Question

(https://i.stack.imgur.com/2jAFj.png) A comment that starts with @

(https://i.stack.imgur.com/Zri42.png) You need to highlight it in green, like here

How to do it? Preferably through a custom plugin.

Answer 1

What you want to do does indeed require you to write your own syntax, but it's not very complicated. You can extend the existing CSS syntax and just change this one piece.

Based on Babel, the scope of these comment tags should be entity.other.attribute-name.documentation. So, using Tools > Developer > New Syntax, create this:

Packages/User/CommentTagsCSS.sublime-syntax

%YAML 1.2
---
name: CommentTagsCSS
scope: source.css
version: 2

extends: Packages/CSS/CSS.sublime-syntax

file_extensions:
  - css

contexts:
  comments-content: # The appropriate context from CSS.sublime-syntax
    - meta_append: true
    - match: "@[a-z]+"
      scope: entity.other.attribute-name.documentation.css

When you open a CSS file, you can set the syntax using the menu in the bottom right of the window to User > CommentTagsCSS. If you want this to always be the CSS syntax, use Open all with current extension as… in the same menu.

Next, if you want to keep your current color scheme but use a different color for just these tags, ST streamlines creating the necessary file. You just use the menu item (on macOS) SublimeText > Preferences > Customize Color Scheme. This will open a split window with the current scheme on the left and the custom settings for that scheme on the right, named and placed correctly. Use the right hand one to modify the scheme as you wish. So just put this on the right:

// Documentation at https://www.sublimetext.com/docs/color_schemes.html
{
    "variables": {},
    "globals": {},
    "rules": [
        {
            "name": "JSDoc comment tags",
            "scope": "entity.other.attribute-name.documentation.css",
            "foreground": "color(var(green))"
        }
    ]
}

If you want to change the color for Babel JS files as well, remove .css from the scope above.

For more about this and feature requests for syntax extension, see this thread on the Sublime Forum.