Skip to content

Commit

Permalink
msglist css: Fix inline border on text inside code blocks.
Browse files Browse the repository at this point in the history
When the Markdown implementation on the server was upgraded in the
3.0-dev period, one subtle change was that code blocks started looking
like <pre><code>...</code></pre> instead of just <pre>...</pre>.

As a consequence, our CSS rules that were meant to apply to inline
code snippets started applying also to the text inside a code block.
Most conspicuously, we started showing not only a block-level border
around the whole code block (as intended), but also an inline border
around just the text inside the block.  That means a border starts on
the left of the text; runs above and below it to the end of just the
text on the line; then the border lines break and resume at the start
of the next line; etc., until wrapping around the right end of the
text on the last line.  We also showed a contrasting gray background
enclosed by that border, just as we do for inline code snippets,
giving the text in the code block a stripey appearance.

This fix is inspired by the webapp's changes that addressed the same
issue: zulip/zulip@43ac901ad and zulip/zulip@c00f626f8.

Fixes: zulip#4257
  • Loading branch information
gnprice committed Sep 17, 2020
1 parent 81e55be commit 88350af
Showing 1 changed file with 9 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/webview/static/base.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,15 @@ code, pre {
background-color: hsla(0, 0%, 50%, 0.125);
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}
pre code {
/* Starting with Zulip Server 3.0, code blocks have `pre > code`.
Undo the stuff we have for `code` that isn't meant to apply there. */
font-size: inherit;
white-space: inherit;
padding: 0;
border: none;
background: none;
}
table {
border-collapse: collapse;
width: 100%;
Expand Down

0 comments on commit 88350af

Please sign in to comment.