Này người xa lạ!

Còn chờ gì nữa mà không mau đăng nhập hoặc đăng ký để cùng tham gia thảo luận với cộng đồng!

CODE blocks on forum need fixing

đã sửa March 2015 trong Trang phản hồi Chrome

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

Now:

before


After:

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

Bình luận

  • đã sửa March 2015 Chrome

    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.

Đăng nhập hoặc Đăng ký để gửi bình luận.