Skip to content

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

Open
pettinarip wants to merge 1 commit into
codeblock-shikifrom
codeblock-restyle
Open

codeblock: proposal — refresh styles and switch theme to vitesse#18195
pettinarip wants to merge 1 commit into
codeblock-shikifrom
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 ab8a93c
🔍 Latest deploy log https://app.netlify.com/projects/ethereumorg/deploys/6a05cdc3fc7c6e0008fe4d33
😎 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: 68 (🟢 up 3 from production)
Accessibility: 96 (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.

@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.

onClick={() => setIsCollapsed(!isCollapsed)}

{hasCornerUi && (
<div className="pointer-events-none absolute inset-e-4 top-1.5 flex items-center gap-1 font-mono text-[10px] leading-none tracking-[0.08em] text-disabled uppercase">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
<div className="pointer-events-none absolute inset-e-4 top-1.5 flex items-center gap-1 font-mono text-[10px] leading-none tracking-[0.08em] text-disabled uppercase">
<div className="pointer-events-none absolute inset-e-4 top-1.5 flex items-center gap-1 font-mono text-2xs leading-none tracking-[0.08em] text-disabled uppercase">

>
<span>
{t("show-all")}{" "}
<span className="text-disabled transition-colors duration-[120ms] ease-out group-hover/expander:text-primary">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Suggested change
<span className="text-disabled transition-colors duration-[120ms] ease-out group-hover/expander:text-primary">
<span className="text-disabled transition-colors duration-120 ease-out group-hover/expander:text-primary">

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.

3 participants