Inline code dificult to Identify

AI-generated summary

The discussion is about making inline code more identifiable. The original poster, hhlp, found two solutions that didn’t work for them. IAmGav suggested checking four settings in admin > settings, but these were for code blocks only.

Ivan_Rapekas provided a CSS solution that works for inline code, but hhlp couldn’t get it to work on their site. JammyDodger confirmed the solution works on their site using the Default Light theme.

Eventually, hhlp found the issue to be a component interfering with the CSS. They then discovered a Discourse component (https://github.com/discourse/discourse-custom-code/tree/main/common) that can be modified to change the inline code formatting without using CSS tweaks. This component can be used to customize both inline code and block-code.

Inline code code → Normal Code

I’ve found this two solutions, both doesn’t works, I’m missing something or something changed in the meantime.

thx in advanced…

Regards.,

there are 4 settings in admin > settings that you would need to look at

I hope that helps

I can’t see any diferences:

Default code language → auto
autohlighted languages → a list
show copy button to codeblock → activated
autohighted all code → activated

option not available code-fences.

I can’t install code-fences because is a business plan.

NOTE

I also adding plain-text to the list…

Regards.,

As OP mentioned, inline code can be highlighted. The method still works:

  1. Go to https://example.com/admin/customize/themes/1/common/scss/edit (regarding your theme URL may differ)
  2. Go to the bottom of the CSS section and paste the code below:
p>code, li>code {
   color: #c7254e;
   background: #f9f2f4;
   padding: 2px 4px;
   border-radius: 2px;
}

Save. Done. Your inline text looks like this: изображение

this is for code blocks only (picture below). The original question was about inline text

thx for response I’ve tested your code before but I don’t know why doesn’t works in mi site:

Captura de pantalla de 2021-11-10 13-04-12

Regards.,

Probably your theme is customized already and does not support this.

I use default theme (sorry for non-english text):

I’ve used the default color schema → light

Regards.,

I’ve just had a test on my site with Default Light theme, and it works for me. :+1: I had to refresh my page for it to display properly.

Did you add it as a new theme component? If so, did you remember to attach it to the theme? (pretty obvious, I know, but I forgot :slightly_smiling_face:)

very glad to works here now, and thx for point me in the right directions, but some problem is here, a component which is apply the them has impediment the source works, when I’ve had a more clear idea was is the component I’ve wrote here.

Regards.,

I’ve found and this is the source:

→ discourse-custom-code/common at main · discourse/discourse-custom-code · GitHub

p > code,
li > code,
pre > code {
  color: dark-light-choose($code_light, $code_dark) $i;
  background: dark-light-choose($code_background_light, $code_background_dark) $i;
}

you can do it without tweaks CSS, just use that component and modify:

  • color light.
  • color background light.
  • code dark.
  • code background dark.

NOTE

however this works for both inline code and block-code.

Regards.,

Seems the proper link should be Custom Code