4

I use Sphinx with the Read the Docs theme. For small inline code snippets, such as the mention of a single variable among a piece of text, I use double backticks to format the code as what's called "inline literals" in the documentation.

  1. Is this the proper way to format inline code snippets?

Unlike proper code blocks, no language specific syntax highlighting is performed on the inline code snippets (that's fine). As seen in the linked documentation above (see the below screen shot), all such "inline literals" are colored red.

enter image description here

  1. How can I change this color to something else?

I'm only concerned with the HTML output of Sphinx.

mzjn
  • 48,958
  • 13
  • 128
  • 248
jmd_dk
  • 12,125
  • 9
  • 63
  • 94
  • See how to override CSS with custom styles, such as in [this example](https://stackoverflow.com/a/63820734/2214933). – Steve Piercy Dec 29 '20 at 04:50

1 Answers1

6

I found a solution, though it involves changing the Sphinx RTD theme source code.

The HTML coloring used by the RTD theme is specified in sphinx_rtd_theme/static/css/theme.css, with the sphinx_rtd_theme directory located in the site-packages directory of the Python installation. The red color used is #e74c3c and the specific place which sets this color for inline literals is

literal{color:#e74c3c}

Changing this color does exactly what I want. Making changes directly to theme_css feels wrong though. The specific change takes place on line 4, which is over 100000 characters wide! Clearly this file is generated from other files. I guess the proper solution involves performing the change do one of these (to me unknown) files.

Edit: Proper solution

With a custom .css file, the colors of the inline literals can be set using

code.literal {
    color: #404040 !important;
    background-color: #fbfbfb !important;
}

The name of a .css file containing the above should be added to html_css_files in the Sphinx conf.py, i.e.

# conf.py
html_css_files = ['custom.css']
jmd_dk
  • 12,125
  • 9
  • 63
  • 94
  • What version of sphinx were you using? I'm currently using v5 and this has no effect (literals are still red). Using firefox inspector I can see that the color is inherited from `tt.literal` so I added a `tt.literal` entry in `custom.css` similar to your original instructions—to no avail. – drootang Oct 18 '22 at 14:07
  • 1
    @drootang This works with Sphinx version 4.5.0. – jmd_dk Oct 18 '22 at 14:15
  • I was struggling with this but eventually found that the CSS filename must be relative to the value set by `html_static_path`, which in my case was `_static`. See [sphinx docs](https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-html_css_files) – drootang Oct 18 '22 at 14:23
  • 1
    @drootang Ah yes, that's right. Also, I can confirm that the above indeed works for Sphinx 5.3.0 as well. – jmd_dk Oct 18 '22 at 15:09