Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Aug 30, 2025

This PR implements Python syntax highlighting for code blocks across the website to improve code readability and user experience for reference implementations.

Implementation

The enhancement uses react-syntax-highlighter with the Prism.js backend, which provides:

  • Clean, readable Python syntax highlighting
  • TypeScript support with proper type definitions
  • Lightweight bundle size and good performance

Key Changes

Enhanced CodeBlock Component:

  • Integrated react-syntax-highlighter with the oneLight theme for clean, readable highlighting
  • Hardcoded Python as the syntax highlighting language for reference implementations
  • Preserved all existing functionality (copy button, scrolling, responsive design)
  • Maintains seamless integration with Material-UI theme system

Updated Usage:

  • Leaderboard reference implementations now display with Python syntax highlighting
  • Simplified implementation focused specifically on Python code display

Visual Impact

Syntax Highlighting Demo

The screenshot demonstrates the improvement with real GPU kernel code:

  • Python code with imports, functions, and strings properly colored
  • Comments displayed in muted colors for better visual hierarchy
  • Copy functionality remains intact and well-positioned

Testing

  • All existing tests continue to pass (83/83)
  • Updated CodeBlock tests to reflect Python-only syntax highlighting
  • Updated Leaderboard tests to work with the simplified component structure
  • Build and linting checks pass successfully

This enhancement significantly improves the developer experience when viewing Python reference implementations on the platform.

Fixes #41.


💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Copilot AI changed the title [WIP] Syntax highlighting Add syntax highlighting to code blocks using react-syntax-highlighter Aug 30, 2025
Copilot AI requested a review from msaroufim August 30, 2025 19:58
Copilot finished work on behalf of msaroufim August 30, 2025 19:58
@msaroufim
Copy link
Member

@copilot you can expect the reference code to be exclusively python code, please simplify your code accordingly

Copy link
Contributor Author

Copilot AI commented Aug 30, 2025

@copilot you can expect the reference code to be exclusively python code, please simplify your code accordingly

Simplified the CodeBlock component to focus exclusively on Python syntax highlighting as requested. Removed the generic language prop and hardcoded "python" as the language. All tests continue to pass (83/83). Commit: 08207bf

Copilot AI changed the title Add syntax highlighting to code blocks using react-syntax-highlighter Add Python syntax highlighting to code blocks using react-syntax-highlighter Aug 30, 2025
Copilot finished work on behalf of msaroufim August 30, 2025 20:18
@msaroufim msaroufim marked this pull request as ready for review August 30, 2025 20:21
@msaroufim
Copy link
Member

@copilot the code will show up in sections titled reference implementation, does your code also highlight those correcty?

Copy link
Contributor Author

Copilot AI commented Aug 30, 2025

@copilot the code will show up in sections titled reference implementation, does your code also highlight those correcty?

Yes, the code is highlighted correctly in sections titled "Reference Implementation"! The CodeBlock component is hardcoded for Python syntax highlighting and works perfectly in the leaderboard's Reference tab.

Here's a demonstration showing the syntax highlighting in action:

Python Syntax Highlighting in Reference Implementation

As you can see:

  • ✅ Keywords (import, def, if, return) are highlighted in purple
  • ✅ Strings are highlighted in green
  • ✅ Comments are muted in gray
  • ✅ Function names and built-ins (torch, print) are properly colored
  • ✅ The copy button is present and functional
  • ✅ It's specifically used in the "Reference Implementation" section of the Leaderboard

The implementation correctly highlights Python code in reference implementation sections as requested.

Copilot AI requested a review from msaroufim August 30, 2025 20:31
Copilot finished work on behalf of msaroufim August 30, 2025 20:31
Copy link
Member

@msaroufim msaroufim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I believe you

@msaroufim msaroufim merged commit 3b4bba1 into main Aug 30, 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.

Syntax highlighting

2 participants