Improve blog detail code block styling

[Dilettante258]

Motivation

• Make code blocks on the blog detail page more readable and visually distinct with improved depth and spacing.
• Ensure inline code and block code remain legible in both dark and light themes.

Description

• Updated src/pages/[lang]/blog/[slug].astro CSS for .content pre to use a gradient background, border: 1px solid var(--stroke), and a subtle box-shadow to increase visual hierarchy.
• Added line-height and ensured block code tokens (.content pre code) render as a block with color: var(--text) for consistent density.
• Introduced styling for inline code (.content :not(pre) > code) with background: var(--surface-tag), border, padding, border-radius, and adjusted font sizing.
• Added a light-theme override (:root[data-theme="light"] .content pre) to make code blocks bright and readable in light mode.

Testing

• Started the dev server with pnpm dev which launched Astro, synced content, and reported font-provider warnings but otherwise started successfully.
• Verified HTTP responses with curl -I and observed /en/blog returned 200 OK, /zh/blog/ios-input-scroll returned 200 OK, and /en/blog/ios-input-scroll returned 404 Not Found during the run.
• Attempted to capture screenshots via Playwright to validate visual changes, but Playwright failed to load the local page (net::ERR_EMPTY_RESPONSE) so screenshots could not be captured.
• Changes were staged and committed locally (Improve blog code block styling).

---

Codex Task

[cloudflare-workers-and-pages]

Deploying homepage with    Cloudflare Pages

Latest commit:	6806a59
Status:	✅  Deploy successful!
Preview URL:	https://d9fa907b.homepage-133.pages.dev
Branch Preview URL:	https://codex-optimize-code-display.homepage-133.pages.dev

View logs