how to customize style of inline code blocks only

[hopezh]

what I want to do

I'd like to customize bg and fg color of inline code blocks, and change them from image 1 shown below to image 2.

what I tried

I tried the following, according to this guide, which changes the style of all code blocks, including normal code blocks:

:root>* {
    --md-code-fg-color: #ffffff;
    --md-code-bg-color: #0000ff;
}

images

image 1:

image 2:

[aborcyjnydreamteam]

Something like this?

.md-typeset > p > code {
    background-color: red;
}

[hopezh]

hi @aborcyjnydreamteam, may I ask you a follow up question?

Your suggestion works for inline code block in body text, but not for those in bullet point text (which is actually what is shown in the image I posted above.). So, is there a CSS setting for this specifically?

Thanks.

[hopezh]

Thanks, @facelessuser

You suggestion works like a charm.

However, the background color of normal code block is also affected, as shown below.

I think I'll use the default bg color for inline code within bullet points, for the time being.

before

after

[facelessuser]

I was probably making some assumptions about format. With my personal configuration, it works fine. I think when using line numbers, the default uses a table format... I'd have to refresh myself on the exact HTML structure used and update the rule. The basic idea of what I'm suggesting should still work, but we need to target the exact, specific differences. I'll take a look tomorrow as it's late here and come back with a response.

[hopezh]

Thank you very much for being so patient with such a small inquiry.

[facelessuser]

I added this CSS directly to the official MkDocs Material site (in the browser):

.md-typeset *:not(pre) > code {
    background: blue;
    color: white;
}

It worked as I described:

If you are doing custom stuff, maybe it won't work the same, but based on the general, recommended configuration, the suggested CSS should work as demonstrated in the image, for both code with line numbers and without.

[hopezh]

@facelessuser Thank you. Yes, your suggestion works like a charm, again.

The key is the > symbol in your CSS snippet, which I didn't add previously.

So, the following is what I have now, after this CSS code in docs/stylesheets/extra.css in my mkdocs project folder.

inline code block in either body text or bullet points are customized together now, without affecting the background color of normal code blocks.