Greasy Fork

CODE blocks on forum need fixing

The new stylized code blocks are mangled by the existing Vanilla CSS rules, below is a simple fix.

Now:

After:

CSS

.Message pre { background: #EEEDD3; padding: 0 }
.Message pre ol { background: #FDFCE4; padding: 8px }
.Message pre li {margin: 0; line-height: 1.2; background: transparent }
code { background: #ff9; border: 1px solid #eec; font-size: 110%; letter-spacing: 0; padding: 3px 8px }
pre code { white-space: pre-wrap }

1. A lighter background color is used for PRE blocks to not interfere with syntax highlighting. Almost the “Solarized” theme.
2. The GreasyFork egg yellow is kept for inline code blocks as well as the old border. Vertical padding is reduced by 1px to prevent overlaps.
3. Letter-spacing is reset to 0 because it destroys intrinsic font hinting, especially on small monospaced text in code tags. Actually it should be removed from the the main text as well, there's nothing justifying its use on small Open Sans font (almost all text here).
4. Alternating background color is removed because it reduces readability of code which isn't tabular data and no sensible code editor does it.
5. Make Firefox wrap long lines in PRE the way Chrome does

5. @tophf did that intentionally - https://github.com/JasonBarnabe/greasyfork/commit/c34b87c403c74f5427292c62c46f242c1775e13c

Well, not that I insist on pre-wrap, the goal was to coerce Firefox into imitating Chrome, my current browser which I'm able to use again thanks to your Stylish-for-Chrome beta improvements, namely de-flicker :-)

On second thought, that commit was applied before these syntax-highlighted code blocks with line-numbering were added to the forum. Now that every line is numbered, forced wrapping makes perfect sense.

I've done what you suggested, except:

2) I switched the background of <code> site-wide to match the <pre> color you suggested.

5) Per above

and I switched the CodeRay highlighting (used when viewing code of scripts) to also match your background color.