improvement(docs): align code blocks with the platform design system by waleedlatif1 · Pull Request #6810 · simstudioai/sim

waleedlatif1 · 2026-08-18T06:48:12Z

Summary

Docs code blocks rendered in stock github-light/github-dark on fumadocs chrome — no colors, typeface, metrics, or corner radius in common with the app. This aligns them.
Adds Sim Shiki themes transcribed from emcn's Prism token colors, shared by the MDX pipeline and fumadocs-openapi, which highlights through its own instance and so had left the whole API reference on the GitHub palette.
Switches docs to the mono stack the app actually renders. apps/sim/tailwind.config.ts points font-mono at --font-martian-mono, but nothing in the app ever defines that variable, so every code surface in the product resolves to the system stack.
Gives blocks the platform's field chrome (rounded-lg, --border-1 hairline, --surface-5/--code-bg fill) and Code.Viewer's 13px/21px metrics. The rule keys on figure.shiki because two different renderers emit these figures and that is the only join point they share.
Numbers every line from the same tokens as the in-app gutter. Padding sits on .line rather than fumadocs' --padding-left, which is re-declared on the inner pre for API samples and dropped the digits on top of the code.
Collapses tabbed fences into one box with the tab strip as the title row, and aligns the inline-code chip with the app's own markdown renderer.
Reuses emcn's Button, useCopyToClipboard, and chip chrome constants instead of re-deriving them; removes ~90 lines of !important overrides, including a figure.shiki:not(div > figure.shiki) rule that could never match.

Type of Change

Improvement

Testing

Tested manually against the docs dev server across prose fences, tabbed fences, titled fences, and the API reference (request tabs, response tabs, usage tabs) in both themes. Smoke-tested 66 pages (40 content + 26 API reference) for 200s. bun run lint, bun run type-check, check:audits (29 audits), and the block-registry check all pass.

Two judgment calls worth a look in review:

Line numbers are on for every block, including one-liners. Numbering only multi-line blocks left adjacent fences starting their code at different x positions, which read as misalignment.
The light palette is faithful to emcn's Prism theme, where three token colors fall below WCAG AA on the code surface (function 2.65:1, comment/constant 2.97:1, variable 3.32:1). Dark mode is 5.96:1+ throughout. Fixing this properly means changing packages/emcn/src/components/code/code.css so the app and docs move together, rather than diverging here.

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Docs code blocks rendered in stock `github-light`/`github-dark` on fumadocs chrome, sharing no colors, typeface, metrics, or corner radius with the app. - Add Sim Shiki themes transcribed from emcn's Prism token colors, shared by the MDX pipeline and fumadocs-openapi (which highlights through its own instance, so the API reference was left on the GitHub palette). - Use the mono stack the app actually renders. `tailwind.config.ts` points `font-mono` at `--font-martian-mono`, but nothing defines that variable, so every code surface in the product resolves to the system stack. - Give blocks the platform's field chrome — `rounded-lg`, a `--border-1` hairline, a `--surface-5`/`--code-bg` fill — and the 13px/21px metrics of `Code.Viewer`. The rule keys on `figure.shiki` because two renderers emit these figures and that is the only join point they share. - Number every line, from the same tokens as the in-app gutter. Padding sits on `.line` rather than fumadocs' `--padding-left`: that property is re-declared on the inner `pre` for API samples, which dropped the digits on top of the code. - Collapse tabbed fences into one box with the strip as the title row, and align the inline-code chip with the app's markdown renderer. - Reuse emcn's `Button`, `useCopyToClipboard`, and chip chrome constants instead of re-deriving them, and drop ~90 lines of `!important` overrides, including a rule that could never match.

vercel · 2026-08-18T06:48:18Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview	Aug 18, 2026 6:54am

cursor · 2026-08-18T06:48:25Z

PR Summary

Low Risk
Docs-only styling and theming with no runtime or security impact; main maintenance risk is keeping shiki-theme.ts in sync with emcn code.css when token colors change.

Overview
Docs code highlighting and chrome are brought in line with the main app: custom Shiki themes transcribed from emcn’s Prism code.css replace default GitHub palettes for both MDX fences and fumadocs-openapi samples via shared simShikiOptions.

Typography and inline code switch to the system mono stack the app actually uses (Geist Mono removed from the docs layout), with inline chips matching the app’s markdown renderer and pre metrics at 13px / 21px like Code.Viewer.

Block chrome is unified on figure.shiki in global.css (rounded field surface, hairline border, themed fill) because prose and API reference use different renderers. That includes line numbers on every fence, tabbed examples as a single control, and CSS-aligned copy affordances on OpenAPI blocks while prose fences use emcn Button + useCopyToClipboard in code-block.tsx. The API request-example native select is styled with emcn chip surface classes.

^{Reviewed by Cursor Bugbot for commit 4a740e5. Configure here.}

greptile-apps · 2026-08-18T06:51:29Z

Greptile Summary

This PR aligns documentation code blocks with the platform design system.

Adds shared light and dark Shiki themes for MDX and OpenAPI rendering.
Updates code-block typography, line numbering, copy controls, tabs, and surface chrome.
Reuses emcn controls and design-system classes in documentation components.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
apps/docs/app/global.css	Reworks documentation code-block, tab, gutter, copy-control, and inline-code presentation.
apps/docs/components/ui/code-block.tsx	Replaces the bespoke clipboard control with emcn primitives and copies sanitized code text through a figure ref.
apps/docs/lib/shiki-theme.ts	Defines shared Sim light and dark syntax-highlighting themes.
apps/docs/source.config.ts	Configures the MDX pipeline to use the shared Shiki themes.
apps/docs/app/[lang]/[[...slug]]/page.tsx	Applies the same Shiki configuration to OpenAPI-generated code samples.
apps/docs/components/ui/api-example-selector.tsx	Restyles the native API-example selector with emcn design-system primitives.
apps/docs/app/[lang]/layout.tsx	Removes the Geist Mono font registration after switching code surfaces to the platform system-monospace stack.

_{Reviews (2): Last reviewed commit: "improvement(docs): align code blocks wit..." | Re-trigger Greptile}

waleedlatif1 · 2026-08-18T07:01:23Z

@greptile

waleedlatif1 · 2026-08-18T07:01:26Z

@cursor review

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 4a740e5. Configure here.}

greptile-apps Bot reviewed Aug 18, 2026

View reviewed changes

Comment thread apps/docs/app/global.css

vercel Bot deployed to Preview August 18, 2026 06:54 View deployment

cursor Bot reviewed Aug 18, 2026

View reviewed changes

Navigation Menu

Uh oh!

improvement(docs): align code blocks with the platform design system - #6810

improvement(docs): align code blocks with the platform design system#6810
waleedlatif1 wants to merge 1 commit into
stagingfrom
docs/codeblock-platform-align

waleedlatif1 commented Aug 18, 2026

Uh oh!

vercel Bot commented Aug 18, 2026 •

edited

Loading

Uh oh!

cursor Bot commented Aug 18, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot commented Aug 18, 2026 •

edited

Loading

Important Files Changed

Uh oh!

Uh oh!

waleedlatif1 commented Aug 18, 2026

Uh oh!

waleedlatif1 commented Aug 18, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

waleedlatif1 commented Aug 18, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel Bot commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

greptile-apps Bot commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Uh oh!

Uh oh!

waleedlatif1 commented Aug 18, 2026

Uh oh!

waleedlatif1 commented Aug 18, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Aug 18, 2026 •

edited

Loading

cursor Bot commented Aug 18, 2026 •

edited

Loading

greptile-apps Bot commented Aug 18, 2026 •

edited

Loading