Sublime Forum

Adobe brackets color scheme and quotes syntax highlighting

#1

https://packagecontrol.io/packages/Brackets%20Color%20Scheme

I use this color scheme and i like it but anything inside double quotes is colored as text despite having its color for itself like variable here

echo "Hi $string"

$string is supposed to be white for varibles, but here it is orange

and in HTML too in

<tag attr="<?php echo "Hi $x"; ?>">Tag</tag>

here <?php ?> is supposed to be white and echo to be blue and $x to be white But instead everything is orange except echo

and for things like

echo "Hi {$x}";

it is still orange even for the curly brackets and for double quotes or any quotes type

0 Likes

#2

Might you wish to post that on the Brackets color scheme’s issue list?

0 Likes

#4

i keep trying to make the account and post the issue but it keeps telling me There was an error verifying your email. and can’t post.

0 Likes

#5

Hi, I am the maintainer of that package and I would be happy to help if there are possible improvements to the color scheme.

I made some updates throughout the last weeks to adjust colors for Sublime Text’s new diff functionality, add better support for some syntaxes like Markdown and made some minor color improvements e.g. for regexp strings. In general I tried to replicate the highlighting style of Adobe Brackets for HTML, CSS, JavaScript and JSON and I think the current syntax highlighting style should be really close in those languages. Additionally the color scheme provides some more and consistent highlighting for the most common languages and made some adjustments/fixes to specific languages that I personally use regularly (Java, Python, LaTeX, Fortran, …), because in my opinion the basic highlighting in most languages other than for web development is pretty bad in Adobe Brackets.

I guess all of your examples are PHP code (right?), but unfortunately I have never used that language myself and don’t really know its syntax. But I will look onto your examples in the next days and try to implement your suggestions. If you have other examples or could provide a screenshot or some more comprehensive code example that I can copy and compare to how it is colored in Adobe Brackets, that would be helpful for me too.

If there are other possible enhancements for specific syntaxes, feel free to create an issue on GitHub.

3 Likes

#6

Thank you for your great work I would like to tell also about the SQL in strings for PHP like

$sql = "
SELECT COUNT(x)
FROM tablex AS x
INNER JOIN tabley AS y ON y.xy = x.yx
WHERE date = $z AND year IS NULL
";

here same as previous problem everything is orange but the functions like this

the blue: SELECT - COUNT - FROM - (OUTER|LEFT|RIGHT|INNER) JOIN - AS - ON - WHERE - date - AND - NULL

but the problem is date because it is not a function but colored as blue while it is just a column name, so i suppose ready function maybe better have the parentheses as a requierement as those https://www.w3schools.com/SQL/sql_ref_mysql.asp

and for the NULL it is colored blue but not the IS but when I used the other definiton of IS NOT NULL it is colored blue entierly

also I suggest other color instead of blue for the MySQL functions.

again thanks for your hard work to provide this Color Scheme, It really relives my eyes.

0 Likes

#7

I could implement most of your suggestions and will update the color scheme soon:

screenshot

Variables and curly brackets inside strings aren’t orange anymore to easily spot them (only in PHP for now).

I removed the orange base color for strings if they are SQL expressions. It might be a bit harder to recognize them as a string while skimming through the code now, but I think in general this looks better and is consistent with how e.g. CSS style attributes and JavaScript inside tags are already handled in HTML automatically. This should apply to Ruby and Python now too.

Regarding your example, “date” in SQL is highlighted in blue because the SQL syntax definition recognizes it as a data type keyword, which seems totally valid, see https://www.w3schools.com/sql/sql_datatypes.asp. Even though it is a column name in your example, with how syntax definitions work in Sublime Text there is no easy way to differentiate your special case. I’m not sure why “year” is not also in the list of data type keywords and why “IS” isn’t recognized as a keyword, but these both are problems of the SQL syntax definition and I can’t resolve them with the color scheme. For example the highlighting of “IS NULL” could be enhanced by improving the regex in line 84 in https://github.com/sublimehq/Packages/blob/master/SQL/SQL.sublime-syntax. By the way “date” and “year” are also highlighted in Adobe Brackets if you choose the standalone SQL syntax in that editor. Regarding the color, blue seems to be appropriate for “SELECT” etc. as it is a basic keyword and highlighted in blue in Adobe Brackets as well.

I was also able to attend your tag example and highlighting should be better now, but there might still be some unhandled cases or optimizations for that.

Another small thing I found is the highlighting of the operator keywords and, or, xor and as that I probably want to change to blue (which means that the negation operator ! will unfortunately also be blue because there is no way to distinguish those. && and || will still be not highlighted because there seems to be a small bug in the syntax definition file). I might revert that in the future if it gets fixed.

@jfcherng: currently && and || in PHP will never be scoped as keyword.operator.logical.php, but instead (unintendedly) get the scope keyword.operator.bitwise.php because its rule will be matched earlier. An easy fix should be to split the rule for keyword.operator.logical.php (lines 243 & 244) and place && and || before the rule of keyword.operator.bitwise.php (lines 239 & 240) (but don’t do that with ! or the same problem will arise with keyword.operator.comparison.php), like such:

    - match: '&&|\|\|'
      scope: keyword.operator.logical.php
    - match: '<<|>>|~|\^|&|\|'
      scope: keyword.operator.bitwise.php
    - match: (===|==|!==|!=|<=>|<=|>=|<>|<|>)
      scope: keyword.operator.comparison.php
    - match: (?i)(!)|\b(and|or|xor|as)\b
      scope: keyword.operator.logical.php
0 Likes

#8

Thanks. PR submitted https://github.com/sublimehq/Packages/pull/1967

0 Likes

#9

i feel like making it blue and white as the actual .sql files would be problmatic in php files since the white is already reserved for variables and blue for functions

maybe making the ready sql functions in php strings bold orange as it is or using a dotted underline or other method while keeping it different from the colors reserved for php would be good

`

SELECT x, y, z, COUNT(d) FROM table WHERE delta = ‘d’ AND zeta = $z

`

because queries are not always written inline but in multilines too like this

SELECT a, b, c, COUNT(d)
FROM table
WHERE x = ‘x’
ORDER BY z ASC
LIMIT 0, 10

while reserving any letter starts with $ sign in it as a variable with the color white

also i would like to mention that in

$x = "Hello $x";
$x is supposed to be white here since it is a variable

but in
$x = 'Hello $x';
$x is orange as everything inside the single quote because single quotes makes every thing an actual string even if used brackets of any type.

also in sql people sometimes use `` Grave accent on names like here https://stackoverflow.com/q/7857278 which may cause a problem perhaps if you made it colored blue.

0 Likes

#10

Actually variables in PHP are white, because I explicitly did not declare a rule for generic variables in the color scheme, so they just use the basic text color (wich is white in the dark theme). This is also the reason why they were not highlighted in strings yet, because in that case all of the string text (including variables) uses the string color (orange). In contrast to that, there does exists a rule e.g. for keywords (blue) in the color scheme, and that will take precedence for SQL keywords, even if they are part of a string.

To clarify, let me explain the basics how syntax highlighting works in Sublime Text:

  1. Syntax definition files (.sublime-syntax) provide a set of rules (basically regular expressions) to assign scopes to a region/fraction of the source code. The syntax definitions of Sublime Text’s built-in languages are maintained at GitHub: https://github.com/sublimehq/Packages
  2. Color schemes declare a set of rules to assign colors and font styles to scopes. Common scope name conventions are used by different languages for comparable language constructs when appropriate, so that color schemes can target them and provide consistent syntax highlighting.

Sublime has a built-in show_scope_name command (ctrl + alt + shift + p) that will show the scope(s) at the current cursor position. For example variables like $x in PHP have the scope variable.other.php and JavaScript variables use variable.other.readwrite.js. Unfortunately sometimes there are inconsistencies with the scope names in different languages, or e.g. in Java or C++ variables don’t get a specific scope at all. Hence it is not always easy to find common highlighting rules and some things could have unintended side effects to other languages.

With your suggestion about PHP variables in strings, I intend to add a rule for variable.other (that could affect other languages too) or variable.other.php into the color scheme to ensure that generic variable names always have the basic text color. I’m not sure if there a other languages that use variables in strings like PHP and want to check that first though. In some languages there are some kind of placeholders in strings like %s that have the scope constant.other.placeholder and I use italic font style to denote them.

I’ve checked the $x in single quoted strings and it will still be orange because the syntax definition already handles that correctly. But thanks for the clarification.

For the SQL example, I don’t want to introduce bold style to the color scheme because in my opinion highlighting in Adobe Brackets looks so well just because it doesn’t use that many different highlighting colors and no distracting font style variations. The colors white and blue are certainly not only reserved for PHP variables and functions, blue is actually used for various things like generel keywords, types, language-specific variables like “this” and intrinsic or base framework functions. So my intention would be to create consistent highlighting and I don’t see a reason why highlighting of SQL in PHP should be different from .sql files. Names enclosed by grave accent would be orange because it is recognized as a string by the SQL syntax.

But if you want orange SQL strings with bold keywords/functions, you can easily customize the color scheme. For that just create a file “Brackets Dark.sublime-color-scheme” and/or “Brackets Light.sublime-color-scheme” in your user package (Preferences > Browse Packages… and open the folder “User”), and
insert the following text:

{
    "rules": [
        {
            "scope": "string source.sql",
            "foreground": "var(orange)"
        },
        {
            "scope": "string source.sql & (keyword.other | support.function | entity.name | storage.type)",
            "foreground": "var(orange)",
            "font_style": "bold"
        }
    ]
}

This should produce orange SQL strings with bold keywords (and white variables as soon as I update the package).

2 Likes

#12

that quiet good to me now specially with the ability to customize it

can’t wait for the next update of the theme.

0 Likes

#13

i have used your latest update of the packge and it works very good but 1 problem
in this example of SQL

$sql = “SELECT x FROM y WHERE z = ‘a’”;
the colors are proper and correct but in concatenation of variables like

$sql = “SELECT”;
$sql .= " x “;
$sql .= “FROM y WHERE”;
$sql .= " z = ‘a’”;

the coloring happens only for the firs sequence SELECT and not the other concatenations

also for aliased column names like SELECT t.x, t.y, t.z from table t the t.x, t.y, t.z are colored orange instead of white as you wanted it to be

0 Likes

#14

Thanks for the feedback.

This is true, but if you think about it how should Sublime know if e.g. the string " x " is part of a SQL expression? In simple words the lexer uses regular expressions to analyze a line of code and doesn’t compare variable names to check if that variable was previously used to define a SQL string. I don’t think that you will get proper highlighting for that example in other editors either. The PHP syntax will only check if a string starts with one of the keywords SELECT|INSERT|UPDATE|DELETE|CREATE|REPLACE|ALTER to determine if it is a SQL string.

Yes, I did recognize that and I think it looks a bit odd too. In t.x the letter t is scoped as constant.other.database-name.sql and x as constant.other.table-name.sql by the SQL syntax, and the color scheme uses orange for constant scopes (except for numbers). Probably variable would have been a better choice instead of constant for these. But I’m not sure if that was accidently or intended in the SQL syntax definition, so I did not override that rule in the color scheme. If you want them to be white I would recommend to add

{
    "scope": "constant.other.database-name.sql, constant.other.table-name.sql",
    "foreground": "var(textcolor)"
}

to your customization rules.

Besides that, there seems to be some other highlighting issues with the SQL syntax, where keywords are not recognized (see screenshot) and thus highlighting will differ from Adobe Brackets. But in general the syntax definition file would have to be improved for that, and not the color scheme.
screenshot

0 Likes