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:
After fix:
Description
Description
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T180332 Syntax highlighting missing in mobile app | |||
| Resolved | Mhurd | T180846 Fix code highlight theme-ing |
Event Timeline
Comment Actions
@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:
... so I changed it to use the same blue as links:
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.
Comment Actions
@Mhurd Could we use the reds and greens associated with the Dark and Sepia mode color palettes?
https://phabricator.wikimedia.org/T169148
| Palette | Color | Hex |
| Sepia | Red | #B32424 (Red30) |
| Sepia | Green | #00AF89 (Green50) |
| Dark | Red | #FF6E6E (Red75) |
| Dark | Green | #00AF89 (Green50) |
Comment Actions
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 :)
Comment Actions
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)
