Display in NPP

PeterJones

To summarize (and maybe clarify) the results of this discussion:

In syntax highlighting the CSS, the problem with the & is found in the Lexilla library that Notepad++ uses for syntax highlighting: that library has never implemented the &-selector, despite Lexilla #210 requesting it more than a year ago. Until Lexilla fixes their bug, it cannot be fixed in Notepad++.
- my opinion: I agree this should be fixed, but it’s dependent on the Lexilla team finding the time and figuring out how, or someone outside their team supplying them with a working PR to fix it. You could add a comment in that issue to let them know people still want &-selectors, but I don’t know if that will really help anything.
In syntax highlighting the HTML, the problem with the & is that it looks to the Lexilla library like you’ve got a mistake with an entity, rather than intentionally tried to
- my opinion: it’s good that Notepad++ is highlighting that differently than the surrounding text, because it’s bad HTML practice to have lone ampersands, and so this different color on lone & will make that character stand out to people using Notepad++ to edit their HTML.

mathlete2

@DomOBU Just to add to @PeterJones ’ comments:

FWIW, the brace-matching issue for this particular example also seems to be linked to the extra space in &:focus {; if you change it to &:focus{, you get the expected brace matching. Unfortunately, I don’t know enough about CSS programming to know if this is actually feasible syntax.

DomOBU

@mathlete2

Sorry for the misunderstanding (usually in French, … means any text before or after).

I hope this time it’s right

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

mathlete2

@DomOBU yes, that seems to match the content that @PeterJones already posted. Hopefully, our corresponding answers are sufficient.

DomOBU

@mathlete2

Thank you for your time.
This problem is not fundamental, I will live with it without any problem:
NPP CSS.PNG

mathlete2

@DomOBU I just noticed that, in your latest screenshot, you removed the space that I mentioned, but the brace highlighting is still mismatched. Looking more closely at my setup, I can see that removing (and even re-adding) that space is only a temporary solution to the mismatch issue - it returns as soon as you click on another line. I could have sworn this wasn’t happening before, but evidently not…

Looking more closely at the code structure, it seems that braces cannot be nested within the & > a group, at least not in the manner that you’ve done here. Further to my original comment about &:focus { looking like it’s commented out: it looks as though there’s some sort of syntax error on the previous line that’s preventing the nested braces (or, perhaps more accurately, the next & statement) from processing as expected. When you run/use this code, does it actually work as expected? If it does, then this is probably a NP++ bug.

FWIW, this vaguely reminds me of a similar issue I encountered in batch scripts, where a closing parenthesis from within an Echo call was being applied unexpectedly. The difference there was that NP++ was actually matching the parentheses the way I would expect it to - the mismatch wasn’t occurring until the script was actually run. The solution was to escape each ) in the Echo call with ^. However, if the code here is valid, I don’t think that would help with the NP++ highlighting.

mpheath

@DomOBU Did you setup any CSS properties like mentioned at this other topic ?

Just tested this code in PythonScript’s startup.py:

editor.setProperty('lexer.css.less.language', 1)
notepad.callback(lambda _: editor.setProperty('lexer.css.less.language', 1), [NOTIFICATION.BUFFERACTIVATED])

I would not know of side-effects of enabling LESS though it does appear to allow nesting.

DomOBU

@mathlete2 @mpheath

Thank you very much for your answers.

The source code of the example is from MDN:
“https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector#using_in_nested_css_styles”
The source code runs correctly with Firefox & Edge.

I copied the source code into the web site “https://lesscss.org/” (thanks to @mpheath, I didn’t know about this web site); this is the result:
Less Capture.PNG

I copied the source code into the web site “https://phcode.dev/” (my brain is getting old, I hadn’t thought of testing the source code into this web site); this is the result:
phcode Capture.PNG

Both results are in line with expectations.
PS: on this forum, it’s a shame that as soon as you question the way NPP works, you’re seen as questioning the quality of NPP.

PeterJones

@DomOBU said in Display in NPP:

PS: on this forum, it’s a shame that as soon as you question the way NPP works, you’re seen as questioning the quality of NPP.

It’s a shame you think that. I see nothing in this conversation that indicates that people thought you were questioning the quality of NPP.

I thought we were pretty clear: on the CSS & issue, you were completely right, but that nothing can be fixed in Notepad++ until the Lexilla library is fixed (and the Notepad++ developer doesn’t control the Lexilla library); for the brace matching, there does appear to be something weird (probably, again, in Lexilla… though whether it’s part of the same & issue, or whether it’s solely caused by the lexer not handling deep nesting properly is uncertain as of yet); for HTML lone-&, the advice, for your own safety, is to always encode the literal & character as & in HTML, and if you do, then you won’t notice that Lexilla chooses a strange style for a lonely &.

mathlete2

@mpheath said in Display in NPP:

Just tested this code in PythonScript’s startup.py:

editor.setProperty(‘lexer.css.less.language’, 1)
notepad.callback(lambda _: editor.setProperty(‘lexer.css.less.language’, 1), [NOTIFICATION.BUFFERACTIVATED])

@DomOBU just to clarify this suggestion: if you open the Plugins menu, you will see something like this:

Note that PythonScript is currently not listed there. To install this plugin (or any other for that matter), select Plugins Admin…. This will bring up a window similar to:

Once you have the desired plugin selected, click Install (top right) and follow the prompts. When finished, PythonScript should appear in the Plugins menu; selecting it should launch something that you can run @mpheath 's code in, which should update your brace matching as desired.

DomOBU

@mathlete2

The installation of the PythonScript plugin doesn’t work.
I assume that Python needs to be installed on my laptop beforehand. I don’t have that configuration because I don’t use Python.

One last question. There are some basic words in CSS: selector, property and value. Why don’t these words appear in the CSS Style Configurator?

Alan Kilborn

@DomOBU said:

The installation of the PythonScript plugin doesn’t work.

“doesn’t work” without further detail doesn’t allow people to help you further with it.

I assume that Python needs to be installed on my laptop beforehand.

No.

You should have been directed to the FAQ.

mathlete2

@DomOBU said in Display in NPP:

There are some basic words in CSS: selector, property and value. Why don’t these words appear in the CSS Style Configurator?

This sounds like a question for the developers, but it looks like a few other users have had similar/related issues with CSS syntax highlighting, even when the identifiers are listed. If these threads do not answer your question, feel free to start a new one.