Could we get different font colors for SEDE comments and strings?

Question

In SEDE, using Chrome on Windows, comments and strings are both formatted in the same shade of green:

(Snip is from this query)

Now, I'm sure many out there will have bones to pick with my query syntax and formatting and whatnot, but all of that harassment aside: it seems to me that this would be much easier to read if the comments and strings were colored differently.

I don't know what all colors are currently allocated in SEDE, but if nothing else two different shades of green would help. Even that bit of contrast would provide some useful semantic differentiation.

rene · Accepted Answer · 2017-04-01 13:22:27Z

6

I have prepared ~~two~~ three commits to change the color for the span.cm-sql-literal in CodeMirrors theme.css that is used by SEDE to apply syntax highlighting.

Follow lang-sql

The first option is to use the color used in lang-sql as suggested by TRiG:

The commit is here

Follow SQL Server Management studio

SSMS is the client side tool for interacting with SqlServer. Its syntax highlighting looks like this: https://i.stack.imgur.com/mcskX.png

If I apply the same red to the CodeMirror theme.css this will be the result:

The commit is here

The Compromise

The bright red scared some users so with different colors offered back and forth this might be acceptable to all parties involved:

The commit is here.

Give feedback

Let me know which of the commits (or none of them) needs to be promoted to a Pull Request so Nick can merge and deploy in 6 to 8 weeks.

Pull Request

I have gone ahead and submitted a Pull Request on GitHub for the last option, the compromise. Now we wait.

edited Apr 1, 2017 at 13:22

answered Mar 29, 2017 at 14:38

rene

86.2k16 gold badges232 silver badges482 bronze badges

Of the two, I prefer the SSMS due to the stark contrast. The dark red color of lang-sql strings is too close to that already in use for variable names (e.g., @Tag in the sample image). More broadly, I would prefer either something like a light blue-green (~ #9ce2da) or a light orange-red (~ #ff944d), though these might be unacceptable due to not being like other existing schemes.
– hBy2Py
Mar 29, 2017 at 15:02
Yeah, I didn't plan on offering the UX minded guru's the opportunity to dream-up an new color scheme. Let's stick as close as possible to its initial intent. Assuming that SSMS is the original intent.
– rene
Mar 29, 2017 at 15:05
I prefer that strings not get in my face shouting like that that second version, but either is better than having no distinction between comments and strings. And if there's a standard that SEDE is following already, we should take that into account.
– Monica Cellio
Mar 29, 2017 at 15:17
Uhh yeah, the strings should be the second red (per my copying of SSMS, anyway, I wouldn't mind a less bright option if people prefer that), I honestly have no idea why they weren't in the first place and how I've looked at them hundreds of times and not considered this
– Tim Stone
Mar 29, 2017 at 15:32
What you have works for me since I'm used to it, but I understand @MonicaCellio's concern too
– Tim Stone
Mar 29, 2017 at 15:36
@TimStone How about a more muted light red, somewhere around #e87b7b?
– hBy2Py
Mar 29, 2017 at 15:37
@hBy2Py that is rather ugly TBH: i.stack.imgur.com/V724a.png
– rene
Mar 29, 2017 at 15:39
@hBy2Py I'd probably go a bit darker & redder for contrast, at least somewhere around #C72929
– Tim Stone
Mar 29, 2017 at 15:40
rene, that's why I originally proposed the #9ce2da and #ff944d; the light red in general seems ill suited for attractive display. On the whole I'd rather take the liberty of departing substantially from SSMS in this instance. I understand the UI/UX motivation for staying close to it, though.
– hBy2Py
Mar 29, 2017 at 15:41
1

@TimStone I like that one better yes: i.stack.imgur.com/Kkwpa.png
– rene
Mar 29, 2017 at 15:42
@TimStone Works for me, rene
– hBy2Py
Mar 29, 2017 at 15:44
Um... red - green is a really bad combination for users with colorblindness. I recommend you do some review of colorblind-friendly color schemes...
– Catija
Mar 30, 2017 at 20:21
1

@Catija the green/green was probably the same already for the colorblind so nothing will improve for them? And what you suiggest will need a complete overhaul of all colors which can be done but wasn't the intent of the question and my answer. sorry.
– rene
Mar 30, 2017 at 21:11
I think the colors as they are are already pretty OK in regards to the colorblind... I'm not an expert, granted, but blue and green are generally distinguishable and pink can usually be discerned from green because they're different values. But the red and green are indistinguishable. It'd just be nice that, if you're introducing a new color, if it could be one that a wider audience could make use of - i.e. not red.
– Catija
Mar 30, 2017 at 21:16
1

Then I think nothing in their UX experience will change for them in that case. There was no distinction between the comments and strings earlier, there is now for users that can see colors and for the colorblind it will look similar as as they can't distinguish green from red... I think it is important that this change doesn't make it worse which, based on your feedback, seems to hold.
– rene
Mar 30, 2017 at 21:22

| Show 4 more comments

TRiG · Accepted Answer · 2017-03-29 13:02:15Z

This site uses the standard prettify, which produces very different colours (strings are red and comments are grey). The code block below is marked with lang-sql:

-- Tag: Tag for co-tag frequency search
DECLARE @Tag nvarchar(100) = ##Tag:string##

-- Make it a case-insensitive search
SET @Tag = LOWER(@Tag)

-- Co-tag name, count of co-tag instances, and links
-- First link is to site search, finding all questions with at minimum
--  the two specified tags
-- Second link is to a SEDE query, finding all questions with ONLY
--  the two specified tags, and no more.
SELECT t.TagName AS 'Co-Tag', COUNT(t.TagName) AS 'Occurrences',

    'site://questions/tagged/' + @Tag + '+' + t.TagName + 
      '|[' + @Tag + '] [' + t.TagName + ']'
      AS 'Posts w/At Least These Tags (Site Search)',

    'http://data.stackexchange.com/chemistry/query/650075/' +
    'questions-with-exactly-two-specified-tags?Tag1=' + @Tag + 
    '&Tag2=' + t.TagName + '&OpenQs=Y&ClosedQs=Y|[' +
    @Tag + '] [' + t.TagName + ']'
    AS 'Posts w/Just These Two Tags (SEDE)'

-- Pull from the entire list of posts first
FROM Posts p

-- Keep all post information; keep only tag info where relevant to the
--   posts that are returned. I think the LEFT JOIN speeds up the search
--   relative to a regular JOIN...?
-- Regardless, this returns one query record for each **tag** (not question),
--   allowing for the "COUNT(...)" above and "GROUP BY ..." below to work 
LEFT JOIN Tags t ON p.Tags LIKE '%<' + t.TagName + '>%'

-- Only keep questions; only keep questions that are tagged with the 
--   primary tag of interest; discard records marking the occurrences
--   of the primary tag of interest
WHERE p.PostTypeId = 1 AND p.Tags LIKE '%<' + @Tag + '>%'
      AND t.TagName <> @Tag

-- Group the results by the secondary tags, enabling the above COUNT
GROUP BY t.TagName

-- Most to least common co-tags
ORDER BY COUNT(t.TagName) DESC

I'd think SEDE would have to use a custom colorset, since it has some extra features ... the parameters & such? — hBy2Py, Mar 29, 2017 at 13:19
@hBy2Py Yeah, SEDE tries to follow the color scheme used in SQL Server Management Studio: i.stack.imgur.com/mcskX.png — rene, Mar 29, 2017 at 13:43
@rene Save for the glaringly red color used there for strings. I'd prefer something less stark, a cerulean or coral, maybe, but even that angry red would be fine -- clear contrast! — hBy2Py, Mar 29, 2017 at 13:45
TRIG, is there a list somewhere of all the langs that are available for code prettifying? — hBy2Py, Mar 29, 2017 at 13:46

Stack Exchange Network

Could we get different font colors for SEDE comments and strings?