On this forum: increase contrast for code

Meta
#1

Edit: My example now shows with Mario’s improvement so anyone reading the following will probably wonder what I’m whining about :wink:

In my opinion this style does not have enough contrast from the standard text. I’m referring to the styling of the word “this” in the former sentence. Compare it to TW (the following is an image):

image

Another option might be a darker background. We often refer to code and fields in our discussions here so if it is possible to tweak the Discourse styling, it’d be good.

@boris

Further use of the backtick?
#2

I did give it a border using a predefined variable, so it also works with dark themes.

There seems to be no possibility to change the CSS settings for the “Sam’s Simple Theme” that can be selected by our users.

1 Like
#3

That was a significant enough improvement IMO, thanks @Mario

#4

For inline code with border, adding left and right padding (2 to 3 px) will help they look better. By the way a post with many inline code with border looks a little untidy.

See for example: Tag-picker is not working independently - #6 by EricShulman

So may be for inline code another style should be used.

#5

If we “codify” 1 word or a whole line using 2 backticks like this: `text` is the same thing, which produces this HTML <code>`text`</code>

The new CSS rule used to implement the changes is this:

p > code, li > code, pre > code {
    border: 1px solid var(--primary-low-mid-or-secondary-low);
}

Which itself is covered in a “block code” marker. HTML: <pre><code>...</code></pre>

```
p > code, li > code, pre > code {
    border: 1px solid var(--primary-low-mid-or-secondary-low);
}
```

As you can see, the new CSS snippet also affects the PRE-CODE block. So adding more padding would have side effects.

Since I only know ~10% of the “tip of the iceberg”, which is Discourse internals about how to create the rendered output, it’s not obvious to me, how to decide on different styling.

And I think, it does not look much better without the border.

See screenshot from code example you linked to: without border

image
image944×266 18.4 KB

IMO the borders even show the start and the end of the code a bit better, as marked in the image below. Where imo the separation of the 2 lines are better than in the first image. … But that’s my personal opinion only.

See screenshot from code example you linked to: with border

image
image948×271 18.6 KB