Page MenuHomePhabricator

Fix code highlight theme-ing
Closed, ResolvedPublic

Description

Pagelib theme code isn't exempting code highlight styling.

Fix: https://github.com/wikimedia/wikimedia-page-library/pull/102

enwiki > Lua (programming language) > Syntax

Before fix:

Screen Shot 2017-11-17 at 12.48.11 PM.png (1×862 px, 188 KB)

Screen Shot 2017-11-17 at 12.48.20 PM.png (1×862 px, 190 KB)

After fix:

Screen Shot 2017-11-20 at 5.07.53 PM.png (1×862 px, 184 KB)

Screen Shot 2017-11-20 at 5.08.01 PM.png (1×862 px, 185 KB)

Related Objects

StatusSubtypeAssignedTask
OpenNone
ResolvedMhurd

Event Timeline

Mhurd updated the task description. (Show Details)
Mhurd added a subscriber: Dbrant.

@cmadeo hey @Dbrant discovered that we weren't using the CSS which makes code syntax highlighting work so we fixed that, but I noticed our theming needed to explicitly exclude these bits too, as you can see from the screenshots in this ticket description.

@bearND noticed doing so left us with one element in particular which looked funky in dark mode - specifically the blue factorial below:

Screen Shot 2017-11-17 at 12.50.18 PM.png (1×862 px, 186 KB)

... so I changed it to use the same blue as links:

Screen Shot 2017-11-17 at 2.26.00 PM.png (1×862 px, 184 KB)

Wanted to check with you if that's ok and to see if there were any other colors we should nudge for dark mode (or sepia)... seems easy to do so if needed.

@Mhurd Could we use the reds and greens associated with the Dark and Sepia mode color palettes?
https://phabricator.wikimedia.org/T169148

PaletteColorHex
SepiaRed#B32424 (Red30)
SepiaGreen#00AF89 (Green50)
DarkRed#FF6E6E (Red75)
DarkGreen#00AF89 (Green50)

Reminder: as explained here https://github.com/wikimedia/wikimedia-page-library/pull/102#issuecomment-345882318 @cmadeo and I ended up finding pre-made dark and sepia CSS for the pygments highlighting extension so we were able to just use those. This ended up being VASTLY less complicated than trying to iron out custom color edge cases ourselves :)

JMinor triaged this task as Medium priority.Nov 27 2017, 8:10 PM
JMinor moved this task from Needs Triage to Bug Backlog on the Wikipedia-iOS-App-Backlog board.

Testing criteria

We're testing the dark and sepia theme's ability to highlight parts of programming language snippets (see the screenshots in the ticket description for examples).
Most of the articles on the List of programming languages article have such examples.

So a handy way to test is:

  • load the List of programming languages article,
  • tap on a link for a language, for example, CoffeeScript
  • when that article loads scroll down until you see a code snippet - (often these articles have some sort of examples section where you will see code snippets similar to the screenshots in this ticket description)
  • ensure when you switch between light, sepia and dark themes that the code snippet still has highlighting (the colors will often change slightly - for example, when you switch to sepia some greens may become purple, but that's ok). the thing we don't want is for any code snippet which *has* highlighting in light mode to no longer have any highlighting in dark or sepia. Note: you don't have to check every code snippet on the article, just one or two is fine.
  • repeat the steps above with a few other languages from the List of programming languages article (C++, Javascript, Haskell, Python, and Swift (Apple programming language) would be good choices)
ABorbaWMF added a subscriber: ABorbaWMF.

Looking super green to me on 5.7.3 (1287)

image.png (291×300 px, 136 KB)

JMinor awarded a token.