Theme code blocks to match the site by kixelated · Pull Request #184 · moq-dev/moq.dev

kixelated · 2026-10-22T00:08:30Z

Code blocks now share one palette that matches the site.

One palette, two highlighters. MDX blocks used Shiki's github-dark, a flat #24292e grey that clashed with the navy page and hid the slate border. The publish/watch embeds used highlight.js's atom-one-dark. Both now read --astro-code-* variables in global.css: green keywords and tags, amber strings, sky constants, violet functions, slate comments, on slate-950. Shiki uses its css-variables theme plus one rule, because the stock theme colors HTML tag names like quoted strings. shiki@^4.5.0 is a new dev dependency for createCssVariablesTheme, matching the Shiki 4 that Astro 7 bundles.
Readable size. Block code rendered at 10.8px: the inline-code 0.82em and prose-lg's code { 0.89em } both stacked on the pre's 0.82rem. Blocks are now 14px. Inline code is unchanged.
Small polish. Tabs are 4 wide, and the horizontal scrollbar is thin and slate instead of the bright default.

Ported onto the Tailwind 4 / Astro 7 upgrade (moq-dev/moq.dev#179): the prose pre background now lives in the prose-moq utility instead of tailwind.config.cjs, the block-code rules sit inside the markdown utility, and the .hljs-* colors stay unlayered so they beat the typography plugin, which v4 puts in the utilities layer.

Checked computed styles in the dev server on HTML (first-cdn), JSON (moq-onion), bash (update-00) and the /publish embed, at desktop and phone widths: pre background rgb(2, 6, 23), block code 14px, tab-size 4, thin slate scrollbar, inline code still 14.76px. tsc --noEmit and astro build pass.

(Written by Claude Opus 5.5)

🤖 Generated with Claude Code

MDX blocks used Shiki's github-dark, a flat grey that clashed with the navy page, while the publish/watch embeds used highlight.js's atom-one-dark. Both now read one palette of --astro-code-* variables in global.css: green keywords and tags, amber strings, sky constants, violet functions, on slate-950. Block code also rendered at 10.8px because the inline-code em size and prose-lg's code size compounded on top of the pre's own size. Blocks are now 14px, with 4-wide tabs and a thin slate scrollbar. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

chatgpt-codex-connector · 2026-10-22T00:08:39Z

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	🔄 Running since 2026-10-22T00:29:46.652410Z	`08621b6`	Manual request
🔒 Security Review	✅ Completed 2026-10-22T00:35:10.213542Z	`08621b6`	Manual request

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

coderabbitai · 2026-10-22T00:13:04Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI
Review profile: CHILL
Plan: Advanced
Run ID: c49bd349-4e1c-4ec3-b0c5-ed18a51b33f9

📥 Commits

Reviewing files that changed from the base of the PR and between cef7692 and b27811d.

⛔ Files ignored due to path filters: 1

bun.lock is excluded by !**/*.lock

📒 Files selected for processing: 5

astro.config.ts
package.json
src/layouts/global.astro
src/layouts/global.css
tailwind.config.cjs

💤 Files with no reviewable changes: 1

src/layouts/global.astro

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

Walkthrough

The change adds Shiki as a development dependency and configures it for Markdown highlighting with a CSS-variable-based theme. Global styles define shared syntax colors, update inline and block code sizing, and adjust preformatted-block styling. The layout no longer imports the Atom One Dark stylesheet. Tailwind typography uses the shared code background variable for code blocks.

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to b2781

No actionable issue remains from this review; the change is mergeable after normal checks.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title clearly summarizes the primary change: updating code-block styling to match the site theme.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description check		The pull request description directly describes the code-block palette, Shiki configuration, syntax highlighting styles, code sizing, tab sizing, scrollbar styling, and validation steps changed in the…

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2 files. (2 skipped: 2 unsupported.)

Full details: Description check

Explanation

The pull request description directly describes the code-block palette, Shiki configuration, syntax highlighting styles, code sizing, tab sizing, scrollbar styling, and validation steps changed in the pull request.

✨ Finishing Touches

✨ Simplify code

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

The prose pre background moves from tailwind.config.cjs into the prose-moq utility, the code-block rules move into the markdown utility, the hljs palette stays unlayered so it beats the typography plugin, and shiki is ^4.5.0 to match Astro 7. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

kixelated · 2026-10-22T00:29:36Z

@codex review

This PR was ported onto the Tailwind 4 / Astro 7 / Shiki 4 upgrade from main, so it needs a fresh look.

(Written by Claude Opus 5.5)

chatgpt-codex-connector · 2026-10-22T00:35:09Z

🛡️ Codex Security Review · Automatically triggered

Security review completed. No security issues were found in this pull request.

Reviewed commit: 08621b6452

View security finding report

Only the user who started this review can view the report in Codex.

ℹ️ About Codex security reviews in GitHub

This is an experimental Codex feature. Security reviews are triggered when:

You comment "@codex security review"
A regular code review gets triggered (for example, "@codex review" or when a PR is opened), and you’re opted in so security review runs alongside code review

Once complete, Codex will leave suggestions, or a comment if no findings are found.

kixelated · 2026-10-22T02:38:40Z

Merging the port onto Tailwind 4 / Astro 7 (08621b6) with the maintainer's go-ahead.

Port: tailwind.config.cjs stays deleted, and --tw-prose-pre-bg moved into @utility prose-moq. The --astro-code-* palette and .hljs-* rules are unlayered so they beat the typography plugin. Block code size, tab-size, and scrollbar rules live in @utility markdown. shiki is now ^4.5.0 to match Astro 7's Shiki 4; createCssVariablesTheme needed no API change.
Verified: dev-server computed styles match the pre-port head on HTML, JSON, and bash blocks and on the /publish highlight.js embed. Inline code size is unchanged. At 375px there's no horizontal page scroll. tsc and astro build pass, and CI is green.
Review: Codex's security review of 08621b6 is clean. Its code review stalled on "Running" and CodeRabbit was out of quota, so the port was reviewed by reading the diff instead; nothing turned up.

(Written by Claude Opus 5.5)

kixelated merged commit 835c5cd into main Oct 22, 2026
2 checks passed

kixelated deleted the claude/code-block-theming-70c45a branch October 22, 2026 02:38

Navigation Menu

Repository navigation

Theme code blocks to match the site - #184

Theme code blocks to match the site#184
kixelated merged 2 commits into
mainfrom
claude/code-block-theming-70c45a

kixelated commented Oct 22, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot commented Oct 22, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 22, 2026 •

edited

Loading

Uh oh!

kixelated commented Oct 22, 2026

Uh oh!

chatgpt-codex-connector Bot commented Oct 22, 2026

Uh oh!

kixelated commented Oct 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

kixelated commented Oct 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector Bot commented Oct 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

coderabbitai Bot commented Oct 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Uh oh!

kixelated commented Oct 22, 2026

Uh oh!

chatgpt-codex-connector Bot commented Oct 22, 2026

🛡️ Codex Security Review · Automatically triggered

Uh oh!

kixelated commented Oct 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

kixelated commented Oct 22, 2026 •

edited

Loading

chatgpt-codex-connector Bot commented Oct 22, 2026 •

edited

Loading

coderabbitai Bot commented Oct 22, 2026 •

edited

Loading