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

Assigned To

None

Authored By

	HebronNor
	Feb 25 2020, 10:35 AM

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?

Related Objects

Mentioned Here: T75282: Content without spaces in <pre> should wrap and break words

Event Timeline

HebronNor created this task.Feb 25 2020, 10:35 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 25 2020, 10:35 AM

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

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

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

Bugreporter2 updated the task description. (Show Details)Oct 4 2025, 1:24 PM

CSS for <pre> overrides some syntaxhighlight propertiesOpen, Needs TriagePublicActions

Description

Related Objects

Event Timeline

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