CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-pydata-sphinx-theme

Bootstrap-based Sphinx theme from the PyData community

Pending
Overview
Eval results
Files

syntax-highlighting.mddocs/

Syntax Highlighting

Pygments integration that provides dynamic light/dark theme switching for code syntax highlighting, with automatic fallbacks and custom style generation.

Capabilities

Stylesheet Generation

Generates custom Pygments CSS with light/dark theme support.

def get_pygments_stylesheet(light_style: str, dark_style: str) -> str:
    """
    Generate the theme-specific pygments.css.
    
    Creates a CSS stylesheet that includes both light and dark syntax
    highlighting styles with appropriate CSS selectors for theme switching.
    Sphinx normally only supports one pygments style, but this function
    enables dynamic switching between light and dark styles.
    
    Parameters:
    - light_style (str): Pygments style name for light theme
    - dark_style (str): Pygments style name for dark theme
    
    Returns:
    str: Complete CSS stylesheet with both light and dark styles
    """

def _get_styles(formatter: HtmlFormatter, prefix: str) -> None:
    """
    Get styles out of a formatter, where everything has the correct prefix.
    
    Extracts CSS styles from a Pygments formatter and applies the specified
    CSS prefix to enable theme-specific styling.
    
    Parameters:
    - formatter (HtmlFormatter): Pygments HTML formatter instance
    - prefix (str): CSS selector prefix to apply
    
    Yields:
    str: CSS rules with proper prefixes applied
    """

CSS Override System

Overwrites Sphinx's default Pygments CSS to enable dynamic theme switching.

def overwrite_pygments_css(app: Sphinx, exception=None):
    """
    Overwrite pygments.css to allow dynamic light/dark switching.
    
    Sphinx natively supports pygments_style and pygments_dark_style but only
    uses CSS media queries. This function replaces the generated CSS with
    JavaScript-controlled theme switching using data attributes.
    
    The function:
    - Validates and applies fallbacks for unavailable styles
    - Generates CSS with theme-specific prefixes
    - Writes the combined stylesheet to _static/pygments.css
    
    Parameters:
    - app (Sphinx): Sphinx application instance
    - exception: Build exception (function exits early if present)
    """

Configuration

Basic Configuration

# conf.py
html_theme_options = {
    "pygments_light_style": "github-light",
    "pygments_dark_style": "github-dark"
}

Available Styles

Popular Pygments styles for light themes:

  • default, github-light, tango, colorful, friendly
  • pastie, perldoc, rrt, trac, vim

Popular Pygments styles for dark themes:

  • monokai, github-dark, dracula, material
  • native, fruity, gruvbox-dark, solarized-dark

Advanced Configuration

# conf.py - Custom style configuration
html_theme_options = {
    "pygments_light_style": "tango",
    "pygments_dark_style": "native", 
    "surface_warnings": True  # Show warnings for missing styles
}

# Fallback to Sphinx's default configuration
pygments_style = "default"         # Used if theme style not found
pygments_dark_style = "monokai"    # Used if theme dark style not found

Usage Examples

Popular Style Combinations

# GitHub-inspired
html_theme_options = {
    "pygments_light_style": "github-light",
    "pygments_dark_style": "github-dark"
}

# Solarized theme
html_theme_options = {
    "pygments_light_style": "solarized-light", 
    "pygments_dark_style": "solarized-dark"
}

# High contrast
html_theme_options = {
    "pygments_light_style": "default",
    "pygments_dark_style": "native"
}

# Colorful options
html_theme_options = {
    "pygments_light_style": "colorful",
    "pygments_dark_style": "monokai"
}

Custom Syntax Highlighting

# conf.py - Custom Pygments configuration
html_theme_options = {
    "pygments_light_style": "custom-light",
    "pygments_dark_style": "custom-dark"
}

# You can also define custom styles by subclassing Pygments styles
from pygments.styles.default import DefaultStyle
from pygments.token import Keyword, Name, Comment, String, Error, Generic

class CustomLightStyle(DefaultStyle):
    styles = {
        Comment: '#008000',
        Keyword: '#0000ff',
        Name: '#000080',
        String: '#ba2121',
        Error: 'border:#ff0000'
    }

Disable Theme Switching

# conf.py - Use standard Sphinx Pygments (no theme switching)
# Don't set pygments_*_style in theme options
# Use standard Sphinx configuration instead:
pygments_style = "default"
pygments_dark_style = "monokai"  # CSS media query based

CSS Output

The generated CSS includes theme-specific selectors:

/* Light theme styles */
html[data-theme="light"] .highlight .hll { background-color: #ffffcc }
html[data-theme="light"] .highlight .c { color: #008000 }
html[data-theme="light"] .highlight .k { color: #0000ff }

/* Dark theme styles */  
html[data-theme="dark"] .highlight .hll { background-color: #49483e }
html[data-theme="dark"] .highlight .c { color: #75715e }
html[data-theme="dark"] .highlight .k { color: #66d9ef }

Style Validation

The system validates Pygments styles and provides fallbacks:

  1. User-specified style: Uses theme options configuration
  2. Theme default: Falls back to theme.conf defaults
  3. Fallback styles: Uses tango (light) and monokai (dark)
  4. Last resort: Uses first available style (usually default)

Error Handling

The system handles various error conditions:

  • Missing styles: Warns user and applies fallbacks
  • Build errors: Safely exits if build fails
  • Invalid configurations: Uses sensible defaults

Performance Considerations

  • Build-time generation: CSS is generated once during build
  • Fallback caching: Style validation is cached per build
  • Minimal overhead: No runtime performance impact

Integration with Code Blocks

The syntax highlighting works with all Sphinx code block directives:

.. code-block:: python
   
   def hello_world():
       print("Hello, world!")

.. literalinclude:: example.py
   :language: python
   :lines: 1-10

```python
# Direct code blocks also supported
def example():
    return "formatted code"

Install with Tessl CLI

npx tessl i tessl/pypi-pydata-sphinx-theme

docs

edit-page.md

html-translation.md

index.md

link-processing.md

logo-management.md

syntax-highlighting.md

template-management.md

theme-setup.md

toc-processing.md

utilities.md

tile.json