Title: Code block theming breaks after build in Astro + Starlight setup · Issue #352 · expressive-code/expressive-code · GitHub
Open Graph Title: Code block theming breaks after build in Astro + Starlight setup · Issue #352 · expressive-code/expressive-code
X Title: Code block theming breaks after build in Astro + Starlight setup · Issue #352 · expressive-code/expressive-code
Description: Hi everyone, we’re using Expressive Code with Astro and Starlight, and we’ve encountered an issue where code block theming works in development, but breaks after building the project. We have a working ec.config.mjs in the root of our As...
Open Graph Description: Hi everyone, we’re using Expressive Code with Astro and Starlight, and we’ve encountered an issue where code block theming works in development, but breaks after building the project. We have a wor...
X Description: Hi everyone, we’re using Expressive Code with Astro and Starlight, and we’ve encountered an issue where code block theming works in development, but breaks after building the project. We have a wor...
Opengraph URL: https://github.com/expressive-code/expressive-code/issues/352
X: @github
Domain: github.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Code block theming breaks after build in Astro + Starlight setup","articleBody":"Hi everyone,\n\nwe’re using Expressive Code with Astro and Starlight, and we’ve encountered an issue where code block theming works in development, but breaks after building the project.\n \nWe have a working ec.config.mjs in the root of our Astro project, and in dev mode, everything works as expected, both styleOverrides and custom themes are correctly applied.\n \nHowever, after running astro build, we noticed the following behavior:\n\n**Markdown code blocks (e.g., ```js):**\n- Reference a valid CSS file, such as ec.l7s1q.css.\n- Apply both styleOverrides and custom themes correctly.\n \n**`\u003cCode /\u003e` component:**\n- References a different, non-existent CSS file, e.g., ec.4551.css. \n- This causes a 404 error in the browser.\n- As a result, no theme styles are applied, although the base styleOverrides still take effect.\n\n**Additional notes**\n- Our ec.config.mjs is clearly being picked up — the styleOverrides apply consistently to both markdown code blocks and `\u003cCode /\u003e`.\n- The issue appears to be isolated to theme configuration not applying to `\u003cCode /\u003e` after build.\n- Setting emitExternalStylesheet: false does not resolve the issue — the `\u003cCode /\u003e` component still attempts to load the missing CSS file.\n\n**DevTools inspection confirms:**\n- Markdown blocks use the correct ec.l7s1q.css.\n- `\u003cCode /\u003e` tries to load ec.4551.css, which isn’t present in the output.\n\n \n**Setup**\nAstro: v5.11.0\nStarlight: v0.34.4\nNode: v22.15.0\nIntegration through Starlight\nCustom ec.config.mjs in project root\n\nAnyone facing similar problems?\n\n**ec.config.mjs (snippet):**\n````\nexport default {\n themes: ['github-light', 'github-dark', 'github-dark-high-contrast'],\n themeCssSelector: (theme) =\u003e {\n switch (theme.name) {\n case 'github-light':\n return '[data-theme=\"light\"]';\n case 'github-dark':\n return '[data-theme=\"dark\"]';\n case 'github-dark-high-contrast':\n return '[data-theme=\"highContrast\"]';\n default:\n return 'html';\n }\n },\n styleOverrides: {\n // ...\n },\n};\n\n","author":{"url":"https://github.com/anouschkach","@type":"Person","name":"anouschkach"},"datePublished":"2025-07-17T20:07:25.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/352/expressive-code/issues/352"}
| route-pattern | /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format) |
| route-controller | voltron_issues_fragments |
| route-action | issue_layout |
| fetch-nonce | v2:9d96f329-abc0-2046-f13b-1cf82d5e794b |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | E37A:32D7CA:16A991:1EBB03:6A568941 |
| html-safe-nonce | 02cbca84a75bb8fc25b8078a843953eafa5a2bbd646bd109430ef0183db8484f |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJFMzdBOjMyRDdDQToxNkE5OTE6MUVCQjAzOjZBNTY4OTQxIiwidmlzaXRvcl9pZCI6Ijc0NDgxMjY4Nzk2OTYzMjQ5MjkiLCJyZWdpb25fZWRnZSI6ImlhZCIsInJlZ2lvbl9yZW5kZXIiOiJpYWQifQ== |
| visitor-hmac | ef8b16d1821631408ac0265f8e00b725ebb0ef809d6ca70ea898152c992b3048 |
| hovercard-subject-tag | issue:3240772113 |
| github-keyboard-shortcuts | repository,issues,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/expressive-code/expressive-code/352/issue_layout |
| twitter:image | https://opengraph.githubassets.com/b1a5e93b50bec6961ab8e92df49911747b606812ecf77a7d090ee194976049b8/expressive-code/expressive-code/issues/352 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/b1a5e93b50bec6961ab8e92df49911747b606812ecf77a7d090ee194976049b8/expressive-code/expressive-code/issues/352 |
| og:image:alt | Hi everyone, we’re using Expressive Code with Astro and Starlight, and we’ve encountered an issue where code block theming works in development, but breaks after building the project. We have a wor... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | anouschkach |
| hostname | github.com |
| expected-hostname | github.com |
| None | 8f21be8503ba8fe6154df415b855c03af52eae3f285bd6ae1fef041dc053da38 |
| turbo-cache-control | no-preview |
| go-import | github.com/expressive-code/expressive-code git https://github.com/expressive-code/expressive-code.git |
| octolytics-dimension-user_id | 124694388 |
| octolytics-dimension-user_login | expressive-code |
| octolytics-dimension-repository_id | 533081040 |
| octolytics-dimension-repository_nwo | expressive-code/expressive-code |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 533081040 |
| octolytics-dimension-repository_network_root_nwo | expressive-code/expressive-code |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | 78af172a48a2056810bb627ffa684003e4f9a5ca |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width