Inline code is hard to see

Product Support

AI-generated summary

The discussion focuses on the difficulty of distinguishing inline code in Discourse’s markdown rendering. bruno_at_dq shares an example and compares it to Stack Overflow and Slack, which provide better visibility for inline code.

omarfilip suggests adding a CSS code to the theme to make inline code more noticeable. However, this solution affects both inline code and code blocks. bruno_at_dq asks if it’s possible to target only inline code, as code blocks are already fine.

omarfilip explains that distinguishing between inline code and code blocks is challenging and suggests consistency between the two. bruno_at_dq thanks omarfilip for the help and mentions that their product uses Slack’s style.

The discussion concludes with sam recategorizing the topic to enable the “solved” button. bruno_at_dq has trouble marking a specific reply as the solution, but sam resolves the issue by marking the solution himself.

1

Inline code in Discourse’s markdown rendered is hardly discernible. Here’s a sequence of the word code with code formatting in every other occurrence: code code code code. It’s very hard to tell the difference.

Compare for instance with how it shows on Stack Overflow:

image
image685×121 15.8 KB

And it’s even more obvious on Slack.

How would one go about changing this so that inline code is noticeable?

2

You can add something like this to your theme’s CSS:

p>code, li>code, pre>code {
    background: #dcdcdc;
}

Customize → Themes → Edit CSS/HTML

3

Thanks! I’ll let the relevant people know about this. I’ll let you know.

4

It seems that this changes both regular code blocks and inline code. Is there a way to just change inline code?

Code blocks are fine, they don’t need more emphasis, in my opinion:

import this
5

Not easily. You could try to target it with CSS attribute selectors… maybe.

A code block will look like this:

<p>
    <code>some code</code>
</p>

and inline code looks like this:

<p>
    "Lorem ipsum "
    <code>some code</code>
     " dolor sit amet."
</p>

The difference is in the quote marks.

But, wouldn’t you want to be consistent and have both with the same background?

6

Thanks for all the help.

The discourse community my team manages is tied to our product and in our product, we aren’t consistent between these two types of code rendering. We use Slack’s style.

How do I go about marking this post as solved? I can’t for the life of me figure this out.

7

Only some of our categories have the solved button enabled. I just recategorized this to Support, you should be able to pick a solution now.

8

Thanks, Sam. I see a solution button in your reply, but not on the reply which I wish to mark as a solution.

I also see it in my two replies to the linked post.

@sam How can I mark the linked reply as a solution. As an alternative, how do I mark any of omarfilip’s replies as a solution?

9

I think its an edge case around live reloading, a full reload of the page would bring state to a … hmmm … good state.

I marked it as a solution for you.