CSS comments should be in GREEN

Sanford Arbogast

Why are CSS comments in BLACK when all other comments are GREEN?

Mark Olson

@Sanford-Arbogast
TLDR: This seems like a problem that will probably never be fixed.

It would seem that the reason for this is that the HTML lexer for Notepad++ does not have a built-in sub-lexer for CSS, but it does have one for JavaScript.

That is, when Notepad++ is colorizing an HTML document, if it detects a <script> tag, it goes into a new state where it colorizes based on JavaScript syntax rather than HTML syntax. But because it has no sub-lexer for CSS, when it hits a <style> tag, it treats the contents as plain old text.

Unfortunately the Lexilla library that Notepad++ uses for syntax coloring is rather low-powered compared to say, the TextMate-based lexer for VSCode, so whereas VSCode can divide a document up into sections that are each colored according to completely different lexers, Lexilla has to reinvent the wheel whenever it wants to have different languages in the same document. This means that a seemingly simple idea like “use CSS rules for syntax coloring inside of <style> tags” has a lot of programming overhead for Notepad++ that makes this kind of problem unusually irritating.

That’s not to say you couldn’t hack together your own workaround. But unfortunately nobody is likely to ride in to save the day here.

mkupper

@Mark-Olson I don’t know much about the lexer stuff and Lexilla but have some questions related to your comment about “Lexilla has to reinvent the wheel whenever it wants to have different languages in the same document.”

If I am viewing an .htm file that contains a <script>…</script> is the lexer/formatter/highlighter/colorizer code at all related to the lexer/formatter/highlighter/colorizer code that would process the same chunk of JavaScript in a .js file? Or are they 100% unrelated code paths and updated/maintained independently?

If I copy/paste the CSS from within the <style>…</style> section of an .htm file into a .css file I see that the css is colored nicely, including green comments. I assume that means people have written and maintain a css lexer/formatter/highlighter/colorizer that works with Notepad++.

rdipardo

@mkupper said in CSS comments should be in GREEN:

If I am viewing an .htm file that contains a <script>…</script> is the lexer/formatter/highlighter/colorizer code at all related to the lexer/formatter/highlighter/colorizer code that would process the same chunk of JavaScript in a .js file? Or are they 100% unrelated code paths and updated/maintained independently?

HTML is styled by this lexer module, which defines styles for all generic SGML markup (XML included) as well as (very basic) JavaScript, ASP and JSP scripts, and (Python) Mako templates, but not <style> elements.

There is also a complete module for independent style sheets with the *.css or *.scss extension.

It’s well documented that there’s no styling of embedded CSS in HTML documents. You can read through this (partial) list of open bug reports, the oldest dating from 2005:

There really is no simple way to programmatically switch between completely different lexer modules in the same editing window. Scintilla is basically a synchronous, single-threaded service running inside the application (despite the addition last year of optional parallelization for line layout).

What VS Code and other Textmate-based editors are doing is basically regex matching. The EnhanceAnyLexer plugin for N++ can provide something like that by setting custom styles for portions of the document that match a user-defined regex.

deleelee

This is a perfect example of when it would be great to be able to load a default language into the User Defined Language window and make changes.

Mark Olson

@deleelee said in CSS comments should be in GREEN:

This is a perfect example of when it would be great to be able to load a default language into the User Defined Language window and make changes.

You can change the appearance of the lexer for a default language, just not in the UDL window.
- Instead, you go from main menu to Style Configurator-><language name>, choose a style name from the Style list, and customize that style. For more info, see the user manual.
You can’t use the UDL editor to edit default languages because they weren’t made using the UDL system. As rdipardo explained above, the lexer for HTML was written in C/C++ because the UDL system is not powerful enough to capture the intricacies of HTML syntax.

Gulshan Negi 0

Well, in my opinion and knowledge, the comment color of CSS is customizable, which means you can change the color of CSS comments.
Thanks

rdipardo

@Gulshan-Negi-0 said in CSS comments should be in GREEN:

Well, in my opinion and knowledge, the comment color of CSS is customizable, which means you can change the color of CSS comments.

This topic is about inline CSS between <style>...</style> tags in HTML documents. You are talking about standalone style sheets with the *.css extension.

To demonstrate that you cannot set the style of inline CSS in HTML files, you can try the following:

Save this markup as index.html:

<html>
    <style type="text/css">
      /* comment */
    </style>
</html>

Open index.html in any published version of Notepad++
Go to Settings > Style Configurator
Select “Language: CSS”
Select “Style: Comment”
Change the style and save
Observe that nothing happens

html-with-inline-style-npp.8.5.7-002.png

Now select CSS from the language menu at Language > C > CSS, and observe that CSS comments are styled as specified in Style Configurator:

style-sheet-npp.8.5.7-002.png