Skip to content

refactor: upgrade prism-react-renderer from v1 to v2#17876

Merged
wackerow merged 5 commits into
devfrom
refactor/prism-react-renderer-v2
Apr 1, 2026
Merged

refactor: upgrade prism-react-renderer from v1 to v2#17876
wackerow merged 5 commits into
devfrom
refactor/prism-react-renderer-v2

Conversation

@pettinarip
Copy link
Copy Markdown
Member

@pettinarip pettinarip commented Mar 27, 2026

Summary

Upgrades prism-react-renderer from v1 (1.1.0) to v2 (2.4.1). Deferred from #17781.

  • Use v2 named exports (Highlight, Prism, themes) — drop defaultProps
  • Replace custom theme objects with built-in themes.duotoneLight / themes.duotoneDark
  • Fix SSR hydration mismatch: use useTheme() directly instead of useColorModeValue (which defaulted to dark on first render)
  • Transparent backgroundColor on both themes so bg-background-highlight controls the background
  • overflow-scrolloverflow-auto (scrollbars only when needed)
  • Type getValidChildrenForCodeblock param, use bare catch

Test plan

  • Code blocks render correctly in light and dark mode
  • Theme toggle doesn't flash or mismatch
  • Solidity, JS, Python, Bash syntax highlighting works
  • Copy-to-clipboard and collapse/expand unchanged
  • No horizontal scrollbar when code fits

Migrate Codeblock component to prism-react-renderer v2 API:
- Replace default import + defaultProps with named exports
- Import Prism from main package instead of subpath
- Add required `plain` property to custom light/dark themes
- Remove deprecated `key` param from getLineProps/getTokenProps
- Fix lint issues: type `child` param, use bare catch clause
@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 27, 2026

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit 992fa65
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/69ca414d65b8c6000843cb05
😎 Deploy Preview https://deploy-preview-17876.ethereum.it
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
7 paths audited
Performance: 57 (🟢 up 2 from production)
Accessibility: 94 (no change from production)
Best Practices: 100 (no change from production)
SEO: 98 (🔴 down 1 from production)
PWA: 59 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@pettinarip pettinarip marked this pull request as draft March 27, 2026 10:11
@pettinarip pettinarip changed the base branch from master to dev March 27, 2026 10:12
@github-actions github-actions Bot added content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies documentation 📖 Change or add documentation translation 🌍 This is related to our Translation Program labels Mar 27, 2026
@pettinarip pettinarip marked this pull request as ready for review March 27, 2026 16:23
Copy link
Copy Markdown
Member

@wackerow wackerow left a comment

Choose a reason for hiding this comment

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

@pettinarip nice! Overall looks good, all above "tests" look good, but just noting a couple things:

(JavaScript example)

Production:
image
image

PR:
image
image

  1. We're getting an extra blank line at the ends
  2. Copy button has lost our primary color
  3. Contrast has dropped a bit with this new color scheme
  4. Dark mode web3.eth.getBlockNumber().then(console.log) doesn't really show any distinction between tokens

I would consider first two as blockers. The others seem fine, just noting the difference.


Separately, this has made me realize that there are a lot of code fences that have their own empty lines (unrelated to above bug) at the end that we could easily regex and clean up (out of scope here)

Copy link
Copy Markdown
Member

@wackerow wackerow left a comment

Choose a reason for hiding this comment

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

Lgtm! Thanks @pettinarip

@wackerow wackerow merged commit 11820d3 into dev Apr 1, 2026
7 checks passed
@wackerow wackerow deleted the refactor/prism-react-renderer-v2 branch April 1, 2026 16:24
@pettinarip pettinarip mentioned this pull request Apr 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

content 🖋️ This involves copy additions or edits dependencies 📦 Changes related to project dependencies documentation 📖 Change or add documentation translation 🌍 This is related to our Translation Program

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants