Skip to content

codeblock: proposal — refresh styles and switch theme to vitesse#18195

Merged
pettinarip merged 3 commits into
devfrom
codeblock-restyle
May 20, 2026
Merged

codeblock: proposal — refresh styles and switch theme to vitesse#18195
pettinarip merged 3 commits into
devfrom
codeblock-restyle

Conversation

@pettinarip
Copy link
Copy Markdown
Member

@pettinarip pettinarip commented May 14, 2026

Proposal on top of #codeblock-shiki to refine the codeblock visuals.

Changes

  • Compact typography (13px / 1.55, tabular-nums) and tighter padding
  • Hairline border, rounded corners, dissolved card chrome
  • Ghost-style Copy and "Show all (N)" buttons that reveal on hover
  • Theme: vitesse-light / vitesse-dark

Example: https://deploy-preview-18195.ethereum.it/developers/tutorials/ai-trading-agent/

@pettinarip pettinarip requested a review from wackerow as a code owner May 14, 2026 13:27
@netlify
Copy link
Copy Markdown

netlify Bot commented May 14, 2026

Deploy Preview for ethereumorg ready!

Name Link
🔨 Latest commit d3be5e4
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/6a0dd0071c71510008441e44
😎 Deploy Preview https://deploy-preview-18195.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: 71 (🟢 up 7 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (🟢 up 1 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.

@github-actions github-actions Bot added dependencies 📦 Changes related to project dependencies tooling 🔧 Changes related to tooling of the project labels May 14, 2026
@pettinarip pettinarip changed the base branch from dev to codeblock-shiki May 14, 2026 13:28
@pettinarip pettinarip force-pushed the codeblock-restyle branch from ab8a93c to d361f6b Compare May 14, 2026 13:32
@pettinarip pettinarip changed the title codeblock: migrate to shiki with vitesse theme and refreshed styles codeblock: proposal — refresh styles and switch theme to vitesse May 14, 2026
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.

🔥 This looks awesome @pettinarip, thanks! just a couple tiny tw classname suggestions, but nothing critical.

cc: @konopkja or @nloureiro for design sign-off, but imo it looks great, much cleaner. Big fan of the slightly smaller text for code, and the clean-up of the copy/show-more ui elements.

Comment thread src/components/Codeblock/CodeblockClient.tsx Outdated
Comment thread src/components/Codeblock/CodeblockClient.tsx Outdated
Base automatically changed from codeblock-shiki to dev May 20, 2026 14:58
pettinarip and others added 2 commits May 20, 2026 17:10
# Conflicts:
#	src/components/Codeblock/CodeblockClient.tsx
Co-authored-by: wackerow <54227730+wackerow@users.noreply.github.com>
@pettinarip pettinarip merged commit 4158f5b into dev May 20, 2026
14 checks passed
@pettinarip pettinarip deleted the codeblock-restyle branch May 20, 2026 15:44
@claude claude Bot mentioned this pull request May 22, 2026
pull Bot pushed a commit to mikeyhodl/ethereum-org-website that referenced this pull request May 28, 2026
PR ethereum#18195 updated component styles and CSS but missed the THEMES
constant in src/lib/shiki.ts, so highlighted output still rendered with
one-light / one-dark-pro instead of the vitesse pair promised in the
PR description.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

dependencies 📦 Changes related to project dependencies tooling 🔧 Changes related to tooling of the project

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants