Syntax themes: .pl-s/.pl-s1 description and usage no longer match

[auscompgeek]

The syntax highlighting themes template describes .pl-s as support. However, from what I can see, it should actually be string. This has caused strings to be highlighted as the wrong colour in rendered code views; for example, the Tomorrow Night themes highlight strings as purple rather than green.

[silverwind]

Got a example?

[auscompgeek]

I guess this one is simple enough.

print('This here is a string.')

[Mottie]

If you look at this demo, it looks like most of the examples are highlighting strings as green. The only time I noticed the string is not green are in the HTTP, JSON and Nginx examples.

If you want to submit a custom theme, I would be happy to include it.

[auscompgeek]

This isn't an issue with the themes themselves, rather, it's an issue with selecting elements incorrectly.

[Mottie]

GitHub uses a custom syntax highlighter so we don't have control over that... To get the comments for the class names, I had to email them directly and that's how they labeled that selector (ref).

I'm not saying we're not going to change anything. I just don't see where the purple strings are showing up and what changes you are requesting. Maybe submit a pull request so we have a better idea?

[Mottie]

Hmm, ok I actually changed my theme to Tomorrow Night and I am seeing the purple strings now... odd that the demo is different.

[auscompgeek]

Guess GitHub might've changed the classes on us. It wouldn't be the first time. Could we contact them and see what else has changed since then? .pl-s is almost definitely string. Here's a couple more test cases:

JS:

console.log("Hello, World!");

bash:

echo "Say $(echo 'Hello World!')."

[Mottie]

Yeah, if you look at #197, you'll see they used to have strings named as .pl-s1...

sigh I don't have a lot of time to work on this today, but I'll start with updating the index.html demo file and go from there.

[Mottie]

Another change I noticed while updating the demo is that the class name of the language has changed. It used to add "highlight-css" after syntax highlighting was applied, now it throws a "source" into the class name "highlight-source-css" - this applies to all highlighted languages.

Also, so far, the following language class names were changed:

• highlight-text-html-basic - used to be highlight-html
• highlight-text-html-php - used to be highlight-php
• highlight-source-c++ - used to be highlight-cpp
• highlight-source-shell - used to be highlight-bash
• highlight-text-tex - used to be highlight-latex
• highlight-source-fortran-modern - used to be highlight-fortran

[auscompgeek]

Sounds like the highlight- class names are now based on the scope names listed in grammars.yml and/or lib/linguist/languages.yml in github/linguist.

[auscompgeek]

Hmm. I found a case where .pl-s1 is used now. Shell sessions:

$ echo 'Hello, World!'
Hello, World!
$ cat file.txt
This is a random file.

Here is the grammar file for it. I'm guessing .pl-s1 might be a source inclusion or something?

[auscompgeek]

Guess it is. Here's some more .pl-s1, this time Literate Haskell:

Test 1:

\begin{code}
module Main where
main = putStrLn "Hello, World!"
\end{code}

Test 2:

> module Main where
>
> main = putStrLn "Hello, World!"

.pl-s1 isn't styled by GitHub's CSS at all, from what I can tell.

[auscompgeek]

FYI, here's another old reference mapping of scopes to CSS class names.

[Mottie]

Thanks for the update... I'll try to find some time this weekend to work on a fix.

[auscompgeek]

I found sindresorhus/github-markdown-css today. The commit history might be interesting/useful.

[Mottie]

Hmm, well after looking at everything, the only thing I can come up with is to just set .pl-s to have the same color as .pl-s1. Any objections?

[silverwind]

I wouldn't do that. pl-s is blue in GH's sheet, while pl-s1 is uncolored (renders as #333). Maybe we should just make pl-s1 the same color as the theme's body color.

[auscompgeek]

I concur with @silverwind. I'm not particularly fond of random source code being highlighted like strings.

However, if we do this, we should also be aware of the fact that shell session output (.pl-mo) won't be easily distinguishable like it is with GH's CSS.

After some investigation, there is one place where .pl-s1 is specifically styled by GH — in template strings, a la Ruby:

puts "#{x} #{y.infinite ? 'TOO LARGE' : y}"

or JavaScript:

console.log(`Hello, ${name}. This is the ${console}. Testing raw strings:`,
            String.raw`a\b\n`);

[auscompgeek]

Looks like sindresorhus/github-markdown-css@1f877b6 is when the .pl-s and .pl-s1 change happened, so I guess it's been in this state since at least April. Scary.

[auscompgeek]

At this point in time, I would suggest changing .pl-s1 to .pl-s, and .pl-s2 to .pl-s1.

[Mottie]

I just updated the github/_template.css file with the comments (element names) I found in the github-dark.css file created by GitHub. The new comments were added above the definition, so any in-line comments may be attached to unnecessary definitions.

It does not include a .pl-s2 class at all. In fact, it seems that the github-dark.css file is missing a bunch of definitions that we have included in the template. I added the GitHub-dark theme to the demo and it seems to work fine without those extra definitions.

Maybe, after I get back from my vacation, we can clean up the syntax themes by removing those extra definitions.

[the-j0k3r]

Thats some long vacation :)

[Mottie]

Perpetual vacation.

[the-j0k3r]

Thats called death :)

[the-j0k3r]

Is this something we can fix or what?

[Mottie]

[auscompgeek]

I think the sensible thing to do forward would be to use the primer syntax theme output linked above (which, side note, was updated to include a carriage-return scope) as a template for all the syntax themes.

Should also go through and remove rules for scopes that have been removed too.

[the-j0k3r]

Ive updated the Github syntax theme a while back now, its needing a cleanup fro unused values, help welcome.

In fact All styles need some cleanup and consistency fixes besides what I already done.