Code Syntax Highlighting#

By default, the theme uses custom QuantEcon syntax highlighting colors for code blocks. You can switch to any Pygments built-in style instead.

Using Pygments Built-in Styles#

To disable the custom code styling and use a Pygments theme:

# conf.py

# Choose a Pygments style
pygments_style = 'friendly'  # or 'monokai', 'github-dark', 'default', etc.

html_theme_options = {
    ...
    "qetheme_code_style": False,
    ...
}

Available Pygments styles include: default, friendly, monokai, github-dark, github-light, tango, vim, and many others. See the Pygments documentation for a full list.

Default Behavior#

When qetheme_code_style is True (the default), the custom QuantEcon code highlighting is used and the pygments_style setting is ignored. When set to False, the theme respects your pygments_style configuration.

Dark Mode Integration#

When using the default QuantEcon code style, dark mode automatically applies a VS Code Dark+ inspired syntax highlighting palette. See Dark Mode — Syntax Highlighting for the full color table.

If you use a custom Pygments style (qetheme_code_style: False), the dark mode syntax colors are not applied and your Pygments configuration takes precedence.

Inline Code Box Styling#

By default, the theme removes the background box and border that pydata-sphinx-theme applies to inline code literals (e.g., `x` or `x = 42`). This keeps inline code visually consistent with the original QuantEcon look.

To re-enable the box styling (background color, border, and padding) on inline code elements:

html_theme_options = {
    ...
    "inline_literal_box": True,
    ...
}

For Jupyter Book projects:

sphinx:
  config:
    html_theme_options:
      inline_literal_box: true

When inline_literal_box is False (the default), inline code appears without any visual container. When set to True, inline code elements display with a subtle background and border provided by the parent theme.

Inline Code Color#

Inline code literals (e.g., `x`) are styled with a distinct text color that integrates with the theme’s color scheme system:

Scheme

Light Mode

Dark Mode

seoul256 (default)

#af5f5f (muted rust)

#d78787 (soft rose)

gruvbox

#9d0006 (dark red)

#fb4934 (bright red)

none

inherits text color

inherits text color

To override the inline code color, set --qe-literal-color in a custom CSS file placed in your _static/ directory:

:root {
  --qe-literal-color: #912583;  /* custom color for light mode */
}
body.dark-theme {
  --qe-literal-color: #f3c7ee;  /* custom color for dark mode */
}