Refactor markup code block styles

[wxiaoguang]

Close #30292

[silverwind]

Root of the problem is that :not(.code-inner) that was added in #30234 adds specificity which makes the selector win over .markup pre > code, honstestly I would rather like to revert this :not() addition than to layer more hacks on top of it.

We should tread careful around this markup CSS, we should stay as close as possible to GH CSS. What were you targeting with :not(.code-inner)?

BTW, I already did a different fix for this in #30282, but am not happy with it either.

.markup .highlight pre > code,
.markup pre > code {
  background: none !important;
}

[wxiaoguang]

@silverwind I believe is good enough and it is a right fix. It clearly defines the styles for different code usages, and remove all dirty/unclear CSS style overridings, and no need to use !important.

---

Update:

honstestly I would rather like to revert this :not() addition than to layer more hacks on top of it

It would just introduce more overridings, and make the styles more difficult to maintain.

We should tread careful around this markup CSS, we should stay as close as possible to GH CSS. What were you targeting with :not(.code-inner)?

code-inner is for the code-preview code highlight, to keep it the same as other code renders. And it is still a good name to distinguish it from other inline/block code usages.

[silverwind]

I disagree with this selector list. what about blockquote > code etc, you can't possibly list every single element here.

[silverwind]

Would like to see .markup code:not(.code-inner) being reverted to .markup code. This is too hacky.

[wxiaoguang]

I don't see anything hacky. The existing code is more hacky and will cause more problems.

[silverwind]

If we really have to we, can use .markup code:where(:not(.code-inner)) to avoid adding specificity in a :not selector but I would prefer to stay as close as possible to GitHub CSS and that is definitely with .markup code.

I will continue the fix in #30282 where I will revert the :not.

[wxiaoguang]

I have no interesting for playing style overriding games, as always.

[wxiaoguang]

-> Fix code block style for code preview #30298

I think it is better than overriding unnecessary styles.