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.

image.png (527×1 px, 49 KB)

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;
}

image.png (141×1 px, 1 KB)

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

Event Timeline

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..

After upgrading to 1.35, background-color: unset; doesn't work as before. Probably due the introduction of:

div.mw-highlight {
    background-color: inherit;
}