Code styling looks different inside lists


(John Bachir) #1

here is some code

  1. here is a list with some code

curiously, if i make a bullet list example after this, then the styling in the whole thing becomes consistent


(Hamish Robertson) #2

This is because the CSS selector for the rule that adds the background color is p > code - The > means only code elements that are immediate children of a p have the extra styles applied. The contents of lists aren’t even descendants of a p.

  • test code wont work
  • I've manually written out the tags for this so it looks like this in the editor:

  • - <p>I've manually written out the tags <code>tags for this</code> so it looks like this...</p>

I can’t work out what you mean by your last sentence. I tried adding another list after this but it didn’t affect the formatting of either list.

You can fix this in your own installation using the Customize tab.

Current CSS:
p > code { background-color: #F1F1FF; border-radius: 3px 3px 3px 3px; margin: 0 2px; padding: 2px 5px; }

Should be:
code { background-color: #F1F1FF; border-radius: 3px 3px 3px 3px; margin: 0 2px; padding: 2px 5px; }


Edit: Also I’ve noticed that the margin and padding only apply to the first line inside the code block.
Just Googled it and it’s not Discourse specific. It could be ‘fixed’ but we’d have to loose the gaps between lines.


(Jeff Atwood) #3

Sorry about that, fixed in current minimalist theming friendly design.


(Jeff Atwood) #4