UX: Improve Onebox code blocks with numbered lines (PR #11320)

Changes:

  • numbers column now fits the content
  • reduced the contrast of the border
  • made the numbers color use our css vars (i.e. fixed the contrast on the dark theme)
  • numbers are aligned with the code
  • the text selection doesn’t is no longer visible over the numbers

Note: uses display: table :eyes: Should I change it to use grid instead? (probably)

before/after light-before light-after dark-before dark-after

GitHub

This looks very nice!

oh yikes, didn’t realize how ugly that before was until seeing the after :clap:

Looks great!

Is the lack of indentation in the # Backup finalizer... line a regression?

Is the lack of indentation in the # Backup finalizer... line a regression?

It is… :sob:

Whitespace is collapsed, regardless of whitespace: pre, between the beginning of a display: table-row element and a first non-text node, i.e. an actual element. That disqualifies the display: table/table-row/table-cell technique. :slightly_frowning_face:

Not much luck with grid either. Since pseudo-elements (::before) are nested inside li it means that they can’t be a separate grid column.

Looks like changing the html is unavoidable… I’ll try to do it in a least compatibility-breaking way.