Refine our inline code style

[choldgraf]

Context

Currently we are using the default Bootstrap style for inline code:

This is an issue to discuss whether people prefer a different kind of style.

I think the most common alternative would be something that also defines a background to the inline code span, to make it stand out a bit more, and feel more similar to code blocks. A few examples from our inspiration themes:

Source	Img
Docker
GitBook
Furo
Material mkdocs
Docasaurus
JupyterLab

After digging up all of these examples, I promise I didn't know this ahead of time but it looks like all of them define a background for their inline code. Maybe we should consider doing the same?

Example

I did a quick experiment, and if we add the following CSS lines:

code span.pre {
    background-color: var(--pst-color-surface);
    border: 1px solid var(--pst-color-border);
    border-radius: 0.25rem;
    padding: 0.1rem 0.2rem;
    color: var(--pst-color-text-base);
}

We get this effect:

Or with color primary:

[12rambau]

For me this code styling was the pandas documentation signature but I also know that people find it disturbing. I'm perfectly happy with the solution that use "color primary" as it continues to stand out.

[choldgraf]

As an iterative step forward, we could just try adding the background and leaving the color as-is?

e.g.:

code.literal {
	  padding: 0.1rem 0.25rem;
	  background-color: var(--pst-color-surface);
	  border: 1px solid var(--pst-color-on-surface);
	  border-radius: 0.25rem;
}

results in:

[drammock]

I don't mind adding a background to inline code spans. I'm not a big fan of putting borders around it though. If it must have borders please make them very subtle