Skip to content

Commit 6118701

Browse files
authored
Fix BBCode whitespace display
Currently, the UI renders the BBCode and HTML replacement wrapped in a `<code>` element, but no `<pre>` element, so whitespace is collapsed. This makes complex HTML less readable, and can even lead to semantic differences. For example: ```html <script> console.log(1) console.log(2) </script> ``` With whitespace collapsed, newlines are rendered as spaces when copying and pasting, so the two lines of JS are concatenated into one, causing a syntax error: ```html <script> console.log(1) console.log(2) </script> ``` Another example that causes discrepancies even without semicolon-less JS: ```html <pre onclick="this.textContent = ' tab indented'">not indented</pre> ``` A little contrived, but I'm sure there are plenty of other cases that could cause issues. This PR fixes the problem by adding `white-space: pre-wrap` CSS to the `.codebox` elements.
1 parent 1c5c68c commit 6118701

File tree

1 file changed

+5
-0
lines changed

1 file changed

+5
-0
lines changed

styles/prosilver/theme/common.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -705,6 +705,11 @@ li.row dl.codebox dd {
705705
padding: 0;
706706
}
707707

708+
.bbcode-container .codebox code {
709+
white-space: pre-wrap;
710+
tab-size: 4;
711+
}
712+
708713
/* Codebox adjustments for the revision section of BBCode */
709714
.revision-details > .bbcode-container > .codebox {
710715
min-height: 40px;

0 commit comments

Comments
 (0)