Change styling of inline code blocks so they stand out more

[tobiaseigen]

I have a teams customer requesting inline code blocks that stand out more. Right now whether you are in dark mode or light mode the code block is not very different in color from other text. Could we change the text color by default in Discourse so a different color is used that stands out more, e.g. red?

I know for most customers this is not a big issue because they can customize the theme to change the CSS on their site, but for Discourse for Teams this level of customization is not possible. Meanwhile for teams discussing code it matters a great deal that it stand out as very different from the other text.

[Julienlavigne (Julien Lavigne du Cadet)]

Thanks Tobias. For the record I’m the customer and I want to emphasis that I’m talking exclusively about inline blocks. I don’t have any concerns with multiline.

[tobiaseigen]

Yeah, the multiline blocks are pretty cool.

There are other ways to highlight text but obviously the backtick is most expedient.

[Julienlavigne (Julien Lavigne du Cadet)]

For the record, if you are an html noob like me (I had to search for it):

1. Fancy! is made with <kbd>Fancy!</kbd>
2. Ohhhh! is made with <ins>Ohhhh!</ins>

It’s useful to know, thanks @tobiaseigen.
I still think it would make sense to tweak the CSS for this so. We have some technical posts that are using backticks a lot, and using the 2 alternatives is definitely not as user friendly.

[Moin]

@Julienlavigne

I had to search for it

A tipp for next time: just quote the post where you want to know how to do that, then you can see it.

[tobiaseigen]

Sorry about that! Usually I would reveal the trick but I was on my phone and in a bit of a hurry.

Another handy trick to seeing how a post was created is to use the raw URL, e.g. https://meta.discourse.org/raw/57255/7

[tobiaseigen]

Oh, there is a third way to highlight that is nice too that I keep forgetting. It looks like this and is done using this html markup <mark>text</mark>. There’s a community contributed theme component (not available in Teams) that lets you use ==text== instead which is quite handy. Not finding it immediately for some reason.

But anyway, I will discuss with my colleagues about updating the default styling of code blocks so they are more obvious. Maybe even just making the code block background color more distinctive will be sufficient.

[jordan-vidrine]

Got a PR to change inline codeblocks in core here: PR: Inline code block styling edits by jordanvidrine · Pull Request #16394 · discourse/discourse · GitHub

[sam (Sam Saffron)]

Sorry … rolling this back for now.

[codinghorror (Jeff Atwood)]

Inline code has always looked like regular code, in a code (monospace) font. Anything really bright and jarring would be highly dependent on the community, and definitely not consistent with the way I see code used in most places on the web.

The issue of syntax highlighting is different; you’d need multiple lines of code to determine which syntax you’re dealing with. Perhaps that was the root of the issue – if you want syntax highlighting you need a block of code, e.g.

var x, y, z;  // Declare 3 variables
x = 5;    // Assign the value 5 to x
y = 6;    // Assign the value 6 to y
z = x + y;  // Assign the sum of x and y to z

document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";

A single code element is divorced from all context necessary to do syntax highlighting. You could do a single line of JavaScript though:

"the value of z is " + z + ".";

Which looks like

``` javascript
"the value of z is " + z + ".";
```

So I guess this is about blocks of code versus a word of code.

[sam (Sam Saffron)]

@codinghorror

and definitely not consistent with the way I see code used in most places on the web.

I guess @jordan-vidrine there are marching orders here. Just to go ahead and do a full revert of the change. Maybe make a theme component for “alternative code styles” it can go full Slack on inline code and make it red being a component an all.

[awesomerobot (Kris)]

This recent iteration was a theme component active on Meta and not an actual change, so I’ve gone ahead and disabled it.

[tobiaseigen]

Fine to not make this change.

I think the ask here really was for a quick and easy way to highlight text in discussions. Many people (myself included) have taken to using backticks to highlight text because it’s super easy… you don’t even have to press shift, and it’s discoverable on the menu. But it’s not very distinct from the rest of the text in the para.

Bold and italics are also on the menu and also do not stand out very much. Other ways to highlight text inline take more keystrokes. Also they are not prominently documented so also require insider knowledge.

As far as I know these are the best ones:

Button <kbd>Button</kbd>
Green underline <ins>Green underline</ins>
Red strikethrough <del>Red strikethrough</del>
Highlight <mark>Highlight</mark>
Strikethrough <strike>Strikethrough</strike>

For folks who can install plugins, there is the official Discourse BBCode color plugin. And for those who cannot install plugins, @merefield created the Discourse Coloured Text theme component.

I also liked the theme component that converted ==highlight== to highlight, but have lost track of it here on meta.

[sam (Sam Saffron)]

@tobiaseigen

I also liked the theme component that converted ==highlight== to highlight

This would need to be done in a plugin at the moment, cause you would want to bake it into html not only perform a client side transform.

Looking at https://markdown-it.github.io/ it looks like it is now enabled by default in markdown.it in non strict mode @Vitaly ?

[tobiaseigen]

@sam

This would need to be done in a plugin at the moment, cause you would want to bake it into html not only perform a client side transform.

Interesting. Thanks for explaining that.

@tobiaseigen

I also liked the theme component that converted ==highlight== to highlight, but have lost track of it here on meta.

I found the plugin that does this randomly today when scrolling through the plugin category… funny how in some cases you just can’t think of the right keyword to find a plugin.

Discourse Mark Plugin

discourse-mark Repository: GitHub - sirideain/discourse-mark: Adds highlighting to Discourse [2018-07-24_22-01-29] Features Adds an editor option to highlight text. Usage You can wrap text with == to highlight it. ==Highlighted Text== Installation Known Issues None Future Update icon to highlighter once Font Awesome 5 is available

[sam (Sam Saffron)]

Oh I see… the root implementation is here:

GitHub - markdown-it/markdown-it-mark: tag plugin for markdown-it markdown...

[Julienlavigne (Julien Lavigne du Cadet)]

Independently of the solution, I think there is a clear UX problem with the current design of the code block. Contrast is almost non-existent.

To quote @codinghorror I would say on the contrary that “most places on the web” do not exhibit this issue

See github:

or slack:

or even notion

I would argue that both green underline and highlight have the exact opposite problem with unnecessary super high contrast but that’s more about taste than a UX problem.

What about implementing the github approach with a darker gray background and some padding?

[sam (Sam Saffron)]

Where this gets complicated is advocating for a huge change on every single Discourse instance many of which are used to the current mild styling. This is a major cheese move.

The workaround of just adding CSS already exists for most installs.