Skip to content

Conversation

@modernchina123
Copy link

Problem

Code blocks display with gray background colors on each line in production, even though local preview shows correctly without backgrounds.

Root Cause

The inline_theme: base16 configuration in _config.yml causes Rouge to generate inline styles (style="background-color: ..."). Inline styles have higher CSS specificity than class-based styles, making it impossible to override with CSS rules, even with !important.

Solution

Removed inline_theme: base16 from _config.yml. Now Rouge will use CSS classes instead of inline styles, allowing our existing CSS rules in _includes/head.html to properly override background colors.

Changes

  • Removed inline_theme: base16 from kramdown.syntax_highlighter_opts in _config.yml

Testing

  • ✅ Local preview verified - code blocks display without line backgrounds

Notes

  • This change should fix the production issue where code blocks show gray backgrounds on each line
  • All existing CSS rules for removing backgrounds remain in place and will now work correctly

@modernchina123 modernchina123 merged commit 21dc717 into main Dec 25, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants