FIXED? Some CSS highlighter quirks

Report issues, odd behaviors or submit a detailed bug report.
User avatar
pjj
Posts: 1998
Joined: 13 Oct 2009 13:48
Location: Kraków, Poland

FIXED? Some CSS highlighter quirks

Post by pjj »

css-quirks.png
css-quirks.png (38.69 KiB) Viewed 830 times
I hope this is self-explanatory; if not, I'd be happy to provide explanations. Anyway:
  • some of selectors are highlighted incorrectly; also some modifiers are not recognized ("before" or "hover" in my example)
  • I'm not sure what #Properties are; anyway, this regex definition is used to highlight incorrect properties -- maybe it should be renamed?
Alium tibi quaere fratrem; hic, quem tuum putas, meus est. Titus Flāvius Caesar Vespasiānus Augustus

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: Some CSS highlighter quirks

Post by inspector71 »

I have seen some issues with CSS highlighting as well. Tolerating it due to the folding / scrolling troubles.

Here's a case where it might have something to do with line feeds.
Image
Image
Without the line feed, the third rule

Code: Select all

#pzlm article
name is black.

With a line-feed after the preceding rule's opening curly brace, the third rule's title is green like all the others.

Just noticed this is the issue with another section of the same file.

With this and the scroll / folding issue (that maybe only I am experiencing :( ), suspect I might need to install a previous version until Rickard gets a chance to write patches.

User avatar
Rickard Johansson
Site Admin
Posts: 6281
Joined: 19 Jul 2006 14:29

Re: Some CSS highlighter quirks

Post by Rickard Johansson »

Made some changes to the CSS syntax file
css.zip
(2.52 KiB) Downloaded 27 times

It should look something like this with the modified syntax file:

css_highlighting01.png
css_highlighting01.png (10.91 KiB) Viewed 747 times
css_highlighting02.png
css_highlighting02.png (5.5 KiB) Viewed 747 times

User avatar
Rickard Johansson
Site Admin
Posts: 6281
Joined: 19 Jul 2006 14:29

Re: Some CSS highlighter quirks

Post by Rickard Johansson »

And I fixed the color display issue...

css_highlighting03.png
css_highlighting03.png (10.99 KiB) Viewed 743 times

User avatar
Rickard Johansson
Site Admin
Posts: 6281
Joined: 19 Jul 2006 14:29

Re: Some CSS highlighter quirks

Post by Rickard Johansson »

Brackets { } in CSS is handled as a block. Every block has a default color. So if the editor encounter something it doesn't recognize, like px, the default block color is used.

Unknown properties ("fnt-weight") has a different color than the standard properties by design. It's common in other editors as well...

E.g. this is what it looks like in Sublime:

css_highlighting04.png
css_highlighting04.png (16.27 KiB) Viewed 743 times

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: FIXED? Some CSS highlighter quirks

Post by inspector71 »

Thanks Rickard.

How do I install the CSS syntax file fixes uploaded into this thread?

Tried Tools > Syntax Editor but unsure if I've done it correctly.

Can I just copy/overwrite the existing file into:

Code: Select all

%APPDATA%\RJ TextEd\Syntax\
... thus, over-writing:

Code: Select all

css.syx
... (what about css.ini?) .

Then restart?

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: FIXED? Some CSS highlighter quirks

Post by inspector71 »

Also, what is that blues on black background theme? Looks great. Should be called Electric Neon Blue in my opinion. Or similar :)

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: FIXED? Some CSS highlighter quirks

Post by inspector71 »

Regarding colour values getting their colour as the background, I love this feature. Alas, I just started enjoying it and then started using CSS Custom Propertier (AKA CSS Variables to most people) so I never see the cool colours when doing something like this:

Code: Select all

:root {
	--bg-color:#FFF;
}

/* ... many rules here  so the above rule disappears out of sight ...  */

body {
	background--color:var(--bg-color);
}
Is there a way that RJTE might be able to interpolate (?) CSS Custom Variables, see if they are defining a colour, and present the colour background behind the var() call in place?

I understand this might be a big ask so no trouble if it's not possible or too much work.

User avatar
Rickard Johansson
Site Admin
Posts: 6281
Joined: 19 Jul 2006 14:29

Re: FIXED? Some CSS highlighter quirks

Post by Rickard Johansson »

To install - just replace the file in %APPDATA%\RJ TextEd\Syntax\.

The theme I use is "Windows 11 Polar Dark". It should be available in the themes menu.

Give background color to variables may require some work, but I'll give it some thought...

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: FIXED? Some CSS highlighter quirks

Post by inspector71 »

Thanks Rickard!

Much appreciated.

User avatar
pjj
Posts: 1998
Joined: 13 Oct 2009 13:48
Location: Kraków, Poland

Re: Some CSS highlighter quirks

Post by pjj »

Rickard Johansson wrote:
31 Jul 2022 17:30
Unknown properties ("fnt-weight") has a different color than the standard properties by design. It's common in other editors as well...
Hey, no need to convince me of that :-D Of course it is very convenient, but my point is that its name (#Properties) is very vague; why not call it e.g. Unrecognized/Incorrect properties instead?

New css.syx works much better, thank you! However it still has some quirks, e.g.

Code: Select all

#id { this is OK: #_Id }
a#id { and this isn't: Text }
or

Code: Select all

h1 {
    padding: 10px; /* padding is recognized as property */
    padding-block-start: 10px;  /* padding-block-start isn't, even though it was inserted via Ctrl-Space */
}
Perhaps there's a better solution to this problem. (Disclaimer: I don't know what I'm talking about.)

Some time ago I was about to suggest using themes that were prepared for different editors and can be freely downloaded from the Internet; there are at least four types of these themes:
  1. Atom
  2. Sublime
  3. TextMate
  4. VS Code
Most of them are licensed with MIT License, which is very lenient, so there would be no need to open-source RJ TE. They are prepared for many languages. There are converters between them (not possible in every direction, though). Perhaps RJ TE could use (import) one of these types?

3 and 4 (possibly others, too) are based on TextMate grammar: set of regex rules. However, there is also another approach -- Tree-sitter:
Tree-sitter is a parser generator tool and an incremental parsing library. It can build a concrete syntax tree for a source file and efficiently update the syntax tree as the source file is edited. Tree-sitter aims to be:
  • General enough to parse any programming language
  • Fast enough to parse on every keystroke in a text editor
  • Robust enough to provide useful results even in the presence of syntax errors
  • Dependency-free so that the runtime library (which is written in pure C) can be embedded in any application
Tree-sitter allows for semantic highlight (which I mentioned here; more examples). Sadly, there's no (at least official) binding of Tree-sitter for Delphi, however there are JS and WASM bindings, so maybe it is doable without writing own binding for Delphi?

Perhaps the same thing (semantic highlighting) can be obtained via LSP:
Tree Sitter for VSCode [Deprecated]
With the improving support for custom syntax coloring through language server, this extension is no longer needed

https://marketplace.visualstudio.com/it ... ree-sitter
but I guess this requires running LSP for many languages that one uses; or just some, and another would work with current/TextMate regex-based rules.

So my point is, I guess, this: please consider using Tree-sitter/LSP for syntax and semantic highlighting. Please use foreign components as much as possible, so they can be quickly imported/updated/adapted to RJ TE -- by you or by other users.
Alium tibi quaere fratrem; hic, quem tuum putas, meus est. Titus Flāvius Caesar Vespasiānus Augustus

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: FIXED? Some CSS highlighter quirks

Post by inspector71 »

Partially off-topic but I wonder if this points to a need not necessarily met. I wonder if a feature comparison table between RJTE and various other editors would be helpful. Might take a lot of work but less if it's a combined effort. If it goes into further detail about how features are implemented, even better!

@pjj have you played around with other editors of late? Can't say I have. Could be worth having a go though.

Such a comparison table might be useful for informing future development both for RJTE and across other editors, vice versa style.

inspector71
Posts: 219
Joined: 22 Sep 2017 07:59

Re: Some CSS highlighter quirks

Post by inspector71 »

pjj wrote:
01 Aug 2022 15:36
Rickard Johansson wrote:
31 Jul 2022 17:30
Unknown properties ("fnt-weight") has a different color than the standard properties by design. It's common in other editors as well...
Hey, no need to convince me of that :-D Of course it is very convenient, but my point is that its name (#Properties) is very vague; why not call it e.g. Unrecognized/Incorrect properties instead?

New css.syx works much better, thank you! However it still has some quirks, e.g.

Code: Select all

#id { this is OK: #_Id }
a#id { and this isn't: Text }
I guess the spaces in the 'property' of the latter declaration are what could easily throw off any regex approach? Along with the apostrophe.
pjj wrote:
01 Aug 2022 15:36
Rickard Johansson wrote:
31 Jul 2022 17:30
or

Code: Select all

h1 {
    padding: 10px; /* padding is recognized as property */
    padding-block-start: 10px;  /* padding-block-start isn't, even though it was inserted via Ctrl-Space */
}
I'm guessing this is due to padding-block-start being a relatively new property. I have found that relatively new, but not exactly toddler age, properties are not color coded. For example, all CSS Grid properties:

Image

In that example, like the display property, the grid properties should be blue, not teal.
pjj wrote:
01 Aug 2022 15:36
Rickard Johansson wrote:
31 Jul 2022 17:30
Perhaps there's a better solution to this problem. (Disclaimer: I don't know what I'm talking about.)

Some time ago I was about to suggest using themes that were prepared for different editors and can be freely downloaded from the Internet; there are at least four types of these themes:
  1. Atom
  2. Sublime
  3. TextMate
  4. VS Code
Most of them are licensed with MIT License, which is very lenient, so there would be no need to open-source RJ TE. They are prepared for many languages. There are converters between them (not possible in every direction, though). Perhaps RJ TE could use (import) one of these types?

3 and 4 (possibly others, too) are based on TextMate grammar: set of regex rules. However, there is also another approach -- Tree-sitter:

Tree-sitter allows for semantic highlight (which I mentioned here; more examples). Sadly, there's no (at least official) binding of Tree-sitter for Delphi, however there are JS and WASM bindings, so maybe it is doable without writing own binding for Delphi?

Perhaps the same thing (semantic highlighting) can be obtained via LSP:

but I guess this requires running LSP for many languages that one uses; or just some, and another would work with current/TextMate regex-based rules.

So my point is, I guess, this: please consider using Tree-sitter/LSP for syntax and semantic highlighting. Please use foreign components as much as possible, so they can be quickly imported/updated/adapted to RJ TE -- by you or by other users.
Did Rickard suggest he was working on integrating some Microsoft-iniated effort to centralise syntax definitions, for any editor to use?

User avatar
pjj
Posts: 1998
Joined: 13 Oct 2009 13:48
Location: Kraków, Poland

Re: FIXED? Some CSS highlighter quirks

Post by pjj »

inspector71 wrote:
02 Aug 2022 04:09
@pjj have you played around with other editors of late? Can't say I have. Could be worth having a go though.
I must say I have had temptations to install VS Code :oops: and while searching for Tree-sitter stuff I thought I might go on and install Neovim. So far I have bravely resist these enticements, though!
inspector71 wrote:
02 Aug 2022 04:09
Such a comparison table might be useful for informing future development both for RJTE and across other editors, vice versa style.
Look no further than good ol' Wikipedia (I came across it yesterday). RJ TE shines in all regards, with only exceptions being lack of CLI, Collaborative editing, Large file support, accessing remote files via HTTP and WebDAV. Frankly, I don't care about CLI nor any other of these... 8)
Alium tibi quaere fratrem; hic, quem tuum putas, meus est. Titus Flāvius Caesar Vespasiānus Augustus

User avatar
pjj
Posts: 1998
Joined: 13 Oct 2009 13:48
Location: Kraków, Poland

Re: Some CSS highlighter quirks

Post by pjj »

inspector71 wrote:
02 Aug 2022 04:18
pjj wrote:
01 Aug 2022 15:36
New css.syx works much better, thank you! However it still has some quirks, e.g.

Code: Select all

#id { this is OK: #_Id }
a#id { and this isn't: Text }
I guess the spaces in the 'property' of the latter declaration are what could easily throw off any regex approach? Along with the apostrophe.
Ooops, my bad; what I tried to express but failed was this: here
#id { }
#id selector is correctly colored as #_Id, while here
a#id { }
a#id selector is incorrectly colored as Text, while it rather should look like this:
a#id { }
Alium tibi quaere fratrem; hic, quem tuum putas, meus est. Titus Flāvius Caesar Vespasiānus Augustus

Post Reply