Skip to content

Conversation

Copilot
Copy link
Contributor

@Copilot Copilot AI commented Aug 25, 2025

This PR addresses inconsistent syntax highlighting where some code blocks (notably bash) rendered poorly compared to others (e.g., powershell) due to a mismatch between the dark monokai theme and light Poole base styles.

Problem

The existing setup used:

  • Dark monokai.css syntax theme (#272822 background)
  • Light Poole pre styles (#f9f9f9 background)
  • This created color contrast mismatches for certain lexers, making bash highlighting appear inconsistent

Solution

Replaced the dark monokai theme with Rouge's built-in GitHub theme:

  1. Generated GitHub Rouge CSS: Used rougify style github > public/css/github-syntax.css
  2. Updated CSS reference: Changed _includes/head.html to load the new GitHub theme instead of monokai
  3. Preserved functionality: Maintained existing scrollability rules in custom.scss

Benefits

  • Consistent highlighting across all languages (bash, powershell, yaml, json, javascript, python, etc.)
  • GitHub-like appearance with proper light theme colors and contrast
  • No more workarounds - no need to mislabel code blocks for better highlighting
  • Seamless integration - GitHub theme's #f8f8f8 background harmonizes with existing Poole styles

Visual Result

Syntax Highlighting Comparison

The screenshot demonstrates consistent, professional syntax highlighting across multiple languages with proper contrast and readability on the light background.

Technical Details

  • Uses Rouge's official GitHub theme for reliability and maintenance
  • Preserves horizontal scrolling for long code lines
  • Compatible with existing Jekyll + kramdown + Rouge setup
  • Minimal changes: only 2 files modified

Fixes #7.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

@Copilot Copilot AI changed the title [WIP] Make code fence syntax highlighting consistent and GitHub-like (replace monokai with Rouge GitHub CSS) Replace monokai with GitHub-like Rouge syntax highlighting for consistent code fence rendering Aug 25, 2025
@Copilot Copilot AI requested a review from solrevdev August 25, 2025 22:00
Copilot finished work on behalf of solrevdev August 25, 2025 22:00
✨ Add concise, prioritized summaries for posts on the home page to
   avoid leaking large code blocks or overly long content in the index.
📁 Modified: index.html, README.md
📝 Document recommended front-matter usage and added a README section
   with examples and a nav entry for the new feature
💡 Behavior: prefer front-matter summary/description, then the first
   rendered paragraph (skipping headings/code), then Jekyll excerpt or
   stripped content as a fallback
@solrevdev solrevdev marked this pull request as ready for review August 27, 2025 12:20
@solrevdev solrevdev merged commit 73ce095 into master Aug 27, 2025
1 check passed
@solrevdev solrevdev deleted the copilot/fix-7 branch August 27, 2025 12:20
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.

Make code fence syntax highlighting consistent and GitHub-like (replace monokai with Rouge GitHub CSS)

2 participants