Improve semantic highlighting across all languages

[dsifford]

The Problem

Dracula does not have an official guideline when it comes to semantic highlighting. Because of this, you might notice that there is really no uniformity between Dracula theme implementations, and even between languages within the same Dracula theme implementation (including this one!).

An example of this behavior can be seen by comparing JSON and yaml languages below.

Before

JSON	Yaml

The solution

The theme implementation will need to be scrutinized so that the semantic highlighting across all languages is uniform.

An example of this solution applied to JSON and yaml can be seen below.

After

JSON	Yaml

Community Feedback

I'd prefer to make these uniformity adjustments as democratic as possible. I understand that everybody has their own personal tastes when it comes to how things should be highlighted. So, in an effort to be as fair as possible, I ask that you please leave your feedback and suggestions below so that the changes can be the result of a large user consensus.

Changes that land in updates are not final

If a particular change is made that you don't like, please let me know and we can discuss!

Progress

Key	Value
❌	Not started
🚧	Work-in-progress
☑️	Finished

Language	Status
c	❌
c++	❌
clojure	❌
coffeescript	❌
c#	❌
css	❌
f#	❌
go	❌
groovy	❌
java	❌
javascript	🚧
json	☑️
less	❌
lua	❌
make	❌
obj-c	❌
perl	❌
php	❌
powershell	❌
python	❌
R	❌
ruby	❌
rust	❌
sass	❌
shell (bash)	❌
swift	❌
toml	❌
typescript	🚧
yaml	☑️

[dsifford]

@wprater One thing I've been mulling over is how to approach highlighting the various types of constants across languages.

Right now (for the most part) numeric and language constants are highlighted purple.

So, if we take JS as an example, that would be these...

1 2 3 4 5 6 7 8 9 0
1.123
true
false
__dirname
__filename
NaN
undefined
null
// ...etc

I'm wondering if this should be broken down into two separate entities: numeric constants being purple and language constants being green?

This isn't really a problem with JS, but other languages have a much broader textmate scope when it comes to language constants so the purple color carries over much further.

[wprater]

I like the idea of breaking them down more. especially the language keywords. numbers, strings, language constructs, and constants should all be different, in my opinion.

wish I could give me more advice now. Ive been mainly using Monokai 80s and Material Ocean, which seem to do quite a but of the breakdown. However, Ive been in JS land recently, less so in Python or Ruby.

did you know about the new TM scope selector for developers that you can activate?

[dsifford]

I like the idea of breaking them down more. especially the language keywords. numbers, strings, language constructs, and constants should all be different, in my opinion.

Yeah, agree that there should be distinction. I suppose the goal is to avoid overdoing it. I imagine some of the Dracula users out there appreciate the "mid-range minimalism" of how the theme sits currently.

Ive been mainly using Monokai 80s and Material Ocean, which seem to do quite a but of the breakdown.

I suppose I could download those themes and see if I can use them for inspiration.

did you know about the new TM scope selector for developers that you can activate?

Nope. Can you clarify?

[wprater]

sorry, for the massive delay!

I thought the TM scope selector could be helpful for you!

[wprater]

Yeah, agree that there should be distinction. I suppose the goal is to avoid overdoing it. I imagine some of the Dracula users out there appreciate the "mid-range minimalism" of how the theme sits currently.

Im not familiar enough with Dracula to know its design inspiration, so perhaps the other themes are not a good example.

[dsifford]

@wprater Ah, yeah nevermind I did know about that scope inspector tool. Very handy indeed!

[ajitid]

Please add different color for escape characters. Python, HTML, C/C++, I found it nowhere. :-/

[dsifford]

@ajitid Added to v1.12.0. Good suggestion 👍

[ajitid]

You still missed to add it for HTML. I typed &mdash (with semicolon) but saw no change.

[dsifford]

That's not an escape character, that's an HTML entity

[dsifford]

@ajitid Added html entity highlighting in 1.13.0.

[mattpilott]

Hey, can we colour php html better, so that php tags and vars and text content in html tags have different colours, as currently they are all white.

Thanks!

[dsifford]

@matt3224

Acceptable? Any color suggestions?

[dsifford]

^not totally sold on this by the way. It's sort of a disaster in a real-world scenario

[mattpilott]

Is it a disaster due to the nested tags? red is a little jarring tough to pick a colour though!

[dsifford]

Just seems like too much chaos. Color looks like it's peppered in without much regard in the snippet I shared (which may or may not also be due to the chaos of the snippet).

Open to your ideas though @matt3224

[mattpilott]

Looking at the coda variant its more pink and html tags are all pink, which is less madness but perhaps we make it so php tags are the purple, vars in white and make the whole of the html tag including the arrows and forward slash the pink?

That combo may look more succinct... perhaps 😉

[dsifford]

@matt3224 Let me mull this over some more and get back with you. I'd prefer to keep the html tags as-is because it currently matches its JSX counterpart (and I personally like the look of the white slash).

I think you're on the right track though. I'll play around with it some more this week and report back with some ideas.

[mattpilott]

Great, thanks @dsifford

[dsifford]

RFC submitted here: dracula/dracula-theme#232

Fully standardized and spec-compliant implementation of this theme will land on the next release. 👍