1387252 - Operators in code sample <pre> blocks have a lighter gray background than all other text

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Design, defect)

Description

[Eric Shepherd [:sheppy]]

This is a site-wide issue, but for a good exemplar page, see:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators

In any code snippet box which uses <pre class="brush: js">, tokens identified as operators such as =, +, ==, ++, / and so forth all have a slightly lighter gray background than everything else.

The culprit is in prism.css, where you find:

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #a67f59;
	background: hsla(0, 0%, 100%, .5);
}

Disabling that background property fixes the issue.

Comment 1

[Eric Shepherd [:sheppy]]

I now see this happening with string literals in the code samples, too. I don't know if it was always like that and I missed it somehow, or if it's new.

But you'd think I'd have noticed...

https://screenshots.firefox.com/5Yllu6J5HpvsMXaT/developer.mozilla.org

Comment 2

[Stephanie Hobson [:shobson]]

I'm removing this from

Comment 3

[Stephanie Hobson [:shobson]]

Er, I'm removing this from all things it appears on, not just operators.

Comment 4

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/5ac218ce8d077302bd570991cbb9d64f40abbf31
Fix bug 1387252: Remove background color from operators, strings, etc

https://github.com/mozilla/kuma/commit/b115f4bbb5d26140f8cef86e8e7125d397984352
Merge pull request #4410 from mozilla/1387252-operator-bg

Fix bug 1387252: Remove background color from operators, strings, etc