Page MenuHomePhabricator

CSS for <pre> overrides some syntaxhighlight properties
Open, Needs TriagePublic

Description

I've generated a new style with pygmentize, with the following command:

/var/www/mediawiki/extensions/SyntaxHighlight_GeSHi/pygments/pygmentize -f html -S monokai -a .mw-highlight > /var/www/mediawiki/extensions/SyntaxHighlight_GeSHi/modules/pygments.generated.css

But I noticed that the background color was being overwritten by the following CSS code:

code, pre, .mw-code {
  color: #000;
  background-color: #f8f9fa;
  border: 1px solid #c8ccd1;
}

Having background-color set both places makes it impossible to change style, and when a code block is next to an image, it looks a bit weird.

To stop <pre> overriding syntaxhighlight properties, but still maintain its functionality I added the following to my MediaWiki:Common.css

div.mw-highlight pre {
  color: unset;
  background-color: unset;
  border: unset;
}

Should this maybe be added to the CSS in the extension?

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 25 2020, 10:35 AM
TheDJ added a subscriber: TheDJ.Feb 25 2020, 12:30 PM

Having background-color set both places makes it impossible to change style, and when a code black is next to an image, it looks a bit weird.

That was recently fixed with T75282: Content without spaces in <pre> should wrap and break words btw.

will have to look at the rest later on..

HebronNor updated the task description. (Show Details)Feb 25 2020, 1:24 PM