feat(frontend): Improve highlighting of code samples

[JacobCoffee]

What

• Rebased on the latest main from Improve highlighting of code samples #1517
• Addresses reviewer feedback to use Pygments instead of manual regex-based highlighting

Changes

• Replace hand-written <span> tags and regex format_html() with Pygments PythonConsoleLexer
• Code samples are now plain Python console text — Pygments generates all syntax highlighting
• Add Pygments>=2.17 as a dependency
• Update both SCSS source and compiled CSS with Pygments token classes
• Fix Fibonacci example: use ... continuation lines and plain < (Pygments handles HTML escaping)

Syntax highlighting colors (dark background)

Token	Class	Color	Example
Prompt (>>>, ...)	.gp	#c65d09 (orange, bold)	>>>
Output	.go	#ddd (light gray)	Hello, I'm Python!
Keywords	.k, .ow	#6ab825 (bright green, bold)	def, for, while
Builtins	.nb	#24909d (teal)	print, input, list
Function names	.nf	#447fcf (blue)	fib
Strings	.s1, .s2, .sa, .si	#ed9d13 (gold)	'Hello'
Numbers	.mi	#3677a9 (blue)	1000
Operators	.o	#999 (gray)	=, +, /
Comments	.c1	#999 (gray, italic)	# floor division
Default code	inherited	#0d870d (green)	variable names, etc.

[timhoffm]

From original PR:

format_html() is actually a poor man's pygments, but I did not want to introduce this dependency. However, switching to pygments would be straight forward, if one wants to have full-fledged highlighting at some point in the future.

Not sure whether it was not the case at the time of the original PR or whether I just didn't know, but sphinx depends on pygments, so it's available in your doc build environment and you could use that instead of this manual approach.

[JacobCoffee]

@timhoffm I'm not sure that we install docs deps where this is used, but I can check tomorrow. pygments is okay with me if it cleans up some cruft

[ewdurbin]

I would lean towards using pygments.

[Copilot]

Pull request overview

This PR enhances the syntax highlighting of Python code samples displayed on the homepage by integrating the Pygments library. The refactoring eliminates manually crafted HTML tags in favor of automated generation using Pygments' PythonConsoleLexer, which properly tokenizes Python console interactions including prompts, comments, and output. The CSS has been updated to use standard Pygments token classes (.c1 for comments, .go for output, .gp for prompts) instead of custom classes (.comment, .output), with an additional highlight color for the prompt marker to improve readability.

Changes:

• Added Pygments>=2.17 dependency for syntax highlighting capabilities
• Introduced _highlight_python_console() function to automatically generate highlighted HTML from Python console code snippets
• Updated CSS token classes from custom names to standard Pygments token types with appropriate styling

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
pyproject.toml	Added Pygments>=2.17 as a new dependency for syntax highlighting
static/sass/style.css	Updated CSS classes from .comment/.output to Pygments token types (.c1/.go/.gp) with color styling
apps/codesamples/factories.py	Added _highlight_python_console() function and refactored code samples to use plain Python console text instead of manual HTML

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[JacobCoffee]

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (2)

static/sass/style.css:3177

• These content: url(...?####) cache-buster query strings changed for the print logos without any corresponding change in the SCSS sources in this PR. If the images themselves didn’t change, consider restoring the previous cache-buster values to avoid forcing clients to re-download unchanged assets.

      content: url('../img/python-logo_print.png?1694722768'); }
    .psf .site-headline a:before {
      width: 334px;
      height: 82px;
      content: url('../img/psf-logo_print.png?1694722768'); } }

static/sass/style.css:2187

• These ?#### cache-buster values changed for success-glow2.png even though the corresponding image-url("success-glow2.png") source in style.scss didn’t change in this PR. If possible, revert this to avoid unnecessary cache invalidation / extra image downloads, or regenerate assets in a deterministic way so unrelated URLs don’t churn.

  background: center -230px no-repeat url('../img/success-glow2.png?1694722768') transparent;

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.