Skip to content

Implement syntax highlighting for code blocks in responses - #1704

Open
anshul23102 wants to merge 1 commit into
imDarshanGK:mainfrom
anshul23102:feature/code-syntax-highlighting
Open

Implement syntax highlighting for code blocks in responses#1704
anshul23102 wants to merge 1 commit into
imDarshanGK:mainfrom
anshul23102:feature/code-syntax-highlighting

Conversation

@anshul23102

Copy link
Copy Markdown
Contributor

Fixes #1140

Summary

Implements syntax highlighting for fenced code blocks in responses using highlight.js and marked.js. Code snippets now display with proper syntax coloring for improved readability, with automatic language detection and theme-aware styling.

Changes

  • Library Integration: Added marked.js for markdown parsing and highlight.js for syntax highlighting (already partially present)
  • Syntax Highlighting: Implemented renderMarkdownWithSyntaxHighlight() function that:
    • Parses markdown with language-aware code blocks
    • Auto-detects language from fence tags (e.g., ```python)
    • Falls back to plaintext for unrecognized languages
    • Applies highlight.js styles automatically
  • Theme Support: Code blocks respect light/dark theme switching via data-theme attribute
  • CSS Enhancements:
    • Extended styling to all <pre><code> blocks (not just specific containers)
    • Maintains consistent padding, font-family, and overflow handling
    • Proper background colors for both light and dark themes
  • Backward Compatibility: Preserves existing .issue-snippet and .suggest-example styling

Implementation Details

  • Language packs are bundled with highlight.js CDN for automatic language support
  • Renderer configured to generate <pre><code class="language-xxx hljs"> structure
  • window.highlightAllCode() can be called after dynamic content rendering
  • window.renderMarkdownWithSyntaxHighlight() exposed globally for markdown rendering

Testing

  • Verify code blocks render with syntax highlighting
  • Test language detection (Python, JavaScript, Java, etc.)
  • Confirm theme switching (light/dark) updates code block colors
  • Check fallback behavior for unknown languages

- Integrate marked.js library for markdown to HTML conversion
- Configure highlight.js with language auto-detection and fallback to plaintext
- Enhance syntax-highlighting.js with renderMarkdownWithSyntaxHighlight() function
- Add support for language detection from fenced code block tags
- Update CSS to style all pre/code blocks consistently
- Support both light and dark theme switching for code blocks
- Maintain backward compatibility with existing .issue-snippet and .suggest-example classes
@anshul23102
anshul23102 requested a review from imDarshanGK as a code owner July 28, 2026 15:29
@anshul23102

anshul23102 commented Jul 28, 2026

Copy link
Copy Markdown
Contributor Author

Thank you for reviewing this PR!

This implementation adds comprehensive syntax highlighting support for code blocks in responses using highlight.js and marked.js.

When you have a moment, please review the changes and consider adding the following labels:

  • gssoc-approved - to mark this as a GSSoC contribution
  • frontend - for frontend changes
  • enhancement - as this adds new functionality
  • priority: high - if this should be prioritized

Thank you!

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.

[Feature] Syntax highlighting for code blocks in responses

1 participant