Sublime Forum

Adding // to the color syntax for css

#1

Since iā€™m using SASS the comment that are with "// some text "are not visible in the output css file, and " /* some text */ " are.

The color currently is white and ā€¦ that not so good and i dont to use /* */ for this type of comment color is #75715.
In the Packages\CSS I modify Comments.tmPreferences file :

name TM_COMMENT_START value // name TM_COMMENT_START_1 value /* name TM_COMMENT_END_1 value */

But still the comments with // are still whiteā€¦ :frowning: How to make them to have the same color as /* */

0 Likes

#2

Iā€™m not sure what Comments.tmPreferences achieve other than assigning shell-variables :question:

If I were to attempt this I would find the following section in the CSS.tmLanguage file, and copy and paste it immediately underneath:

<key>comment-block</key> <dict> <key>begin</key> <string>/\*</string> <key>captures</key> <dict> <key>0</key> <dict> <key>name</key> <string>punctuation.definition.comment.css</string> </dict> </dict> <key>end</key> <string>\*/</string> <key>name</key> <string>comment.block.css</string> </dict>
I would then attempt to modify the copy as follows, although Iā€™m unsure if this will actually capture ā€œto the end of the current lineā€:

<key>comment-block</key> <dict> <key>begin</key> <string>//</string> <key>captures</key> <dict> <key>0</key> <dict> <key>name</key> <string>punctuation.definition.comment.css</string> </dict> </dict> <key>end</key> <string>$</string> <key>name</key> <string>comment.block.css</string> </dict>
Then add an entry to your chosen theme file for the scope 'comment.block.cssā€™.

If you want a different colour then I would modify the second section above to ā€˜comment-block2ā€™ and ā€˜comment.block2.cssā€™.

0 Likes

#3

Thanks for the suggestion agibsonsw . But it doesnt workā€¦ also the // is working i just want to change the color from white to grey

0 Likes

#4

I could be wrong, but you may just need to identify the scope and give it a color in your syntax highlighting scheme.

CTRL+SHIFT+ALT+P will give you the scope, or use a plugin like ScopeHunter.
Editing the scheme is pretty straightforward, but ask if you have any questions.

0 Likes

#5

CTRL+SHIFT+ALT+P dosent open anything :frowning:

0 Likes

#6

It should reveal the current scope in the status bar. If you install ScopeHunter via Package Control you will be able to examine scope more easily, and to also copy the full scope from a panel that opens.

0 Likes

#7

When iā€™m on

// this line and click CTRL+SHIFT+ALT+P

In the bottom it shows source.css meta.selector.css

0 Likes

#8

If you search for ā€˜meta.selector.cssā€™ in your chosen theme file, or add it as a new dict item in this file, you will be able to change the colour for this scope. However, this will affect (a lot of) other text within your css file.

This is because ā€˜//ā€™ is not mentioned, or specifically-scoped, within the ā€˜css.tmLanguageā€™ file because it is not *correct *css-syntax. You will need to modify this tmLanguage file so that it recognises ā€˜//ā€™ and gives it a specific scope. Then you will be able to assign it a specific colour in your theme file.

A previous post of mine indicated how this would be approached - although, I appreciate, that my first attempt at this may not have been correct :smile:

0 Likes

#9

I managed to recognise ā€˜//ā€™ within css files and colour them differently, but it requires a little care.

Find the key/section for ā€˜comment-blockā€™ in the css.tmLanguage file and duplicate it underneath. Amend this duplicate section to:

<key>comment-block-slash</key> <dict> <key>begin</key> <string>\/\/</string> <key>captures</key> <dict> <key>0</key> <dict> <key>name</key> <string>punctuation.definition.comment.slash.css</string> </dict> </dict> <key>end</key> <string>\n</string> <key>name</key> <string>comment.block.slash.css</string> </dict>
Then search for the following - it occurs two or three times:

<dict> <key>include</key> <string>#comment-block</string> </dict>
Amend it to the following at each found location:

<dict> <key>include</key> <string>#comment-block</string> </dict> <dict> <key>include</key> <string>#comment-block-slash</string> </dict>
These *includes *are required, otherwise it will just ignore ā€˜//ā€™ when found within a properties list - and anywhere else for that matter.

Then add the following section to your chosen theme file:

<dict> <key>name</key> <string>Slashes css</string> <key>scope</key> <string>source.css comment.block.slash.css</string> <key>settings</key> <dict> <key>background</key> <string></string> <key>foreground</key> <string>#FF0000</string> </dict> </dict>
I added it near the top, but after Comment, Variable, etc., scopes.

#FF0000 is red but, when you have it working :wink: , you are allowed to change the colour :smiley:

N.B. Of course, you should copy the files before playing with themā€¦

0 Likes

#10

Iā€™ve just been messing around with the Markdown syntax to accomplish more or less the same thing and it was quite tricky. In my case, Markdown doesnā€™t actually support the comments I was adding (I just like using double slashes to comment out chunks of text when I am drafting), but SASS does. So, on the off chance that the OP hasnā€™t worked this out: according to SASSā€™s Editor Support page, the ā€œofficialā€ package for Sublime is here: github.com/kuroir/SCSS.tmbundle ā€¦ blimeText2

(I havenā€™t tried this out; but it looks like it supports double slash comments from the screenshots, and presumably it does other nice things as well.)

0 Likes

#11

@quodlibet
Youā€™re quite right: itā€™s sensible just to use a SASS package, rather than tinkering with the css syntax file :wink: . The Package you refer to includes a syntax file so it should prove straight-forward to tailor theme-colours (among other benefits).

Andy.

0 Likes

#12

Well done agibsonsw (clap) .Thanks very much for your help :slight_smile:

0 Likes

#13

@agibsonsw Not that your discussion was not useful. It would have been very helpful to me, if I hadnā€™t happened to be hacking the Markdown syntax as it was happening :smile:

0 Likes

#14

Similarly, **ScopeHunter **arrived just after Iā€™d spent weeks pressing Ctrl-Alt-Shift-P and trying to quickly write down the scope before it disappeared :laughing:

0 Likes

#15

Ahahahaha! I actually wrote the drafted the following sentence in my previous post (more or less, from memory), before erasing it on the assumption that nobody would care:

ā€œYou seem to be a few weeks (a couple months?) down the line from me when it comes to editing syntaxes.ā€

It will not surprise you that I had the exact opposite experience with ScopeHunter and PlistJsonConverter: pure synchronicity.

0 Likes

#16

I made the mistake of starting with Python syntax - itā€™s a huge, ugly, file :smiling_imp:. But I could certainly have made good use of ScopeHunter.

I wouldnā€™t say Iā€™ve conquered syntax definitions - the repository still puzzles me a little - but Iā€™m able to modify the file(s) as the need, or interest :wink: , occurs. Andy.

0 Likes

#17

I began with the Markdown syntax and am still fighting with it. It doesnā€™t help that I started learning regular expressions at the same time. Looking at the matches for bold still gives me vertigo.

0 Likes

#18

I find this regex designer from radsoftware very useful and free :smile:

0 Likes