feat(code): refresh syntax theme, drop terminal titlebar, polish inline chip#11614
Open
jd wants to merge 1 commit into
Open
Conversation
Contributor
Merge ProtectionsYour pull request matches the following merge protections and will not be merged until they are valid. 🔴 👀 Review RequirementsWaiting for
This rule is failing.
🔴 🔎 ReviewsWaiting for
This rule is failing.
🟢 🤖 Continuous IntegrationWonderful, this rule succeeded.
🟢 Enforce conventional commitWonderful, this rule succeeded.Make sure that we follow https://www.conventionalcommits.org/en/v1.0.0/
🟢 📕 PR descriptionWonderful, this rule succeeded.
|
There was a problem hiding this comment.
Pull request overview
This PR refreshes the site’s code presentation by switching to GitHub-themed syntax highlighting, removing Expressive Code’s terminal titlebar chrome, and polishing inline code styling across Markdown and Astro components.
Changes:
- Move Expressive Code theming/styling configuration into a new
ec.config.mjsand switch EC themes togithub-light/github-dark. - Hide the terminal frame header/titlebar and adjust copy button positioning/alignment to match the new frame layout.
- Update inline code styling to use a bordered “chip” treatment, and update CI-related Astro components to use EC for block code while using Astro’s inline
<Code />with dual themes.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
src/styles/index.css |
Hides EC terminal header, tweaks copy button layout, and updates inline code chip styling + inline Shiki dark-mode swap. |
src/components/MergifyCliUploadStep.astro |
Uses EC <Code> for block snippets and Astro <Code> for inline snippets with GitHub dual themes. |
src/components/MergifyCIUploadStepMatrix.astro |
Switches block code rendering to Expressive Code component and drops per-snippet theme overrides. |
src/components/MergifyCIUploadStep.astro |
Same rendering split as above (EC for blocks, Astro for inline) with GitHub dual themes. |
src/components/BuildkiteCIUploadStepMatrix.astro |
Switches block code rendering to Expressive Code component and drops per-snippet theme overrides. |
src/components/BuildkiteCIUploadStep.astro |
Uses EC <Code> for block snippets and Astro <Code> for inline snippets with GitHub dual themes. |
ec.config.mjs |
Introduces centralized Expressive Code config including dual themes and style overrides. |
astro.config.ts |
Simplifies the EC integration call to rely on the external EC config file. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ne chip - Switch Expressive Code themes: slack-ochin / slack-dark → github-light / github-dark — calmer, more familiar palette for developer readers - Hide the macOS-style window titlebar on terminal frames (we never use titled terminal blocks; the bar was decorative chrome). Restore the top border and corner radius on the bare <pre> underneath so the block remains a clean rounded card - Nudge the copy button position to align with the code's own padding now that the terminal header is gone - Inline `<code>` gets the Pass-A chip treatment: --theme-code-inline-bg fill, 1px --theme-border outline, 4px radius, 0.1em x 0.4em padding — replacing the flat-gray bg with no padding - Components rendering inline code via Astro's `<Code inline />` now use dual themes (github-light / github-dark) and a `.theme-dark` CSS rule swaps the active shiki variable. Block code in those components uses Expressive Code's `<Code>` so it matches markdown blocks - Move the Expressive Code config out of astro.config.ts into a new ec.config.mjs (required for EC's runtime `<Code>` component because the `themeCssSelector` function isn't JSON-serializable) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com> Change-Id: I672ba86013bd3936026725c8910dd211b6208816
jd
force-pushed
the
devs/jd/feat/code-blocks-refresh/refresh-syntax-theme-drop-terminal-titlebar--672ba860
branch
from
5902bd4 to
c16d71b
Compare
Member
Author
Revision history
|
JulianMaurin
approved these changes
May 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
github-dark — calmer, more familiar palette for developer readers
use titled terminal blocks; the bar was decorative chrome). Restore
the top border and corner radius on the bare
now that the terminal header is gone
<code>gets the Pass-A chip treatment: --theme-code-inline-bgfill, 1px --theme-border outline, 4px radius, 0.1em x 0.4em padding —
replacing the flat-gray bg with no padding
<Code inline />nowuse dual themes (github-light / github-dark) and a
.theme-darkCSS rule swaps the active shiki variable. Block code in those
components uses Expressive Code's
<Code>so it matches markdownblocks
ec.config.mjs (required for EC's runtime
<Code>component becausethe
themeCssSelectorfunction isn't JSON-serializable)Co-Authored-By: Claude Opus 4.7 noreply@anthropic.com