Feature Request: Highlight Code Mixed with Markdown Text in a Different Color

[allocgator]

Many websites highlight code blocks when used with regular text. Examples:

1. Wikipedia - the "History" section here has different color for code "hello, world", "main", "printf", etc.

2. Exercise - the "Instructions" section here.

Highlighted code mixed with text makes it easier to read.

[imfing]

I understand.
I would recommend use Custom CSS to add background color to the <code> element.

[allocgator]

This works only in light mode :)

In the left menu bar if you change Light to Dark it doesn't work.

I restarted my browser, cleared data, etc.

Is there a way to make it work in dark mode ?

[imfing]

Oh, I forgot the dark mode. You can change it by:

:is(html[class~=dark] .content code:not(.code-block code)) {
    background-color: red;
}

Next time, you can find the CSS rule by opening Chrome developer tool, then select the element, and find the CSS rule for it:

[allocgator]

The color should work for both modes. Using the below CSS does the trick:

.content code:not(.code-block code) {
  color: #c97c2e;
}

Changing background-color to color works for both light and dark mode.

I can create a PR for documenting this on this page

[imfing]

No need for a PR, I think people can this thread via GitHub search.

[allocgator]

I think people may find it more intuitive to read documentation on Hextra's website than search GitHub discussions.

I think this should be on the Hextra website to showcase customization.

I've created PR #55 for documenting this discussion and discussion #46.

[allocgator]

Replacing background-color with color in the CSS file does it !!

It also works in both modes.