Fix blank Svelte code block on plugin pages (Torchlight fallback)#403
Merged
Conversation
Torchlight returns some blocks un-highlighted (empty style, no token color spans) when its API can't tokenise a language — e.g. the Svelte snippets on some plugin pages. With `.prose pre` being transparent, these inherit prose's light text color and render invisible. Add a CSS fallback giving un-highlighted `code.torchlight` blocks the theme's dark surface and readable text (via new `--color-torchlight-*` theme vars), excluding highlighted blocks so they keep their inline colors. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
CI has no TORCHLIGHT_TOKEN, and Torchlight throws outside production when rendering a block with no token. Set a fake token and Http::fake the API so Torchlight uses its un-highlighted fallback, reproducing the invisible block state offline and deterministically. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
1 participant
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.
Problem
The Svelte + Inertia code block on plugin pages (e.g.
/plugins/jvdluk/pro-vibration) rendered blank.Torchlight highlights code via its API and emits each block with inline
background-colorplus per-token color<span>s. For that Svelte snippet, Torchlight's API can't tokenise the content ({#if},on:click={…}) and returns the block un-highlighted —class='torchlight' style='', with the code as plain text and no colors. The same content ashtml/vue/jshighlights fine, so it's specific to that Svelte source.Because
.prose preisbg-transparent, an un-highlighted block has no background and inherits prose's lightpre codetext color → near-white text on a white page → invisible (worst in light mode).Fix
A CSS fallback so any un-highlighted Torchlight block stays readable:
--color-torchlight-surface/--color-torchlight-textto the@themeblock (Tailwind v4 exposes these as both CSS vars and utilities), matching thematerial-theme-palenighttheme.@applythem to.prose pre code.torchlight:not([style*='background-color']). The:not(...)guard excludes successfully-highlighted blocks (which setbackground-colorinline), so they keep their own syntax colors untouched.This is a display-time fix, so it corrects already-stored
readme_htmlwith no plugin re-sync needed, and is robust to any language/grammar Torchlight can't highlight — not just Svelte.Testing
tests/Feature/TorchlightCodeBlockTest.php(new): asserts fenced code renders with thetorchlightclass, and that an un-highlighted block carries that class with an empty style and no inline background — the exact condition the fallback CSS targets. Deterministic because the test env has noTORCHLIGHT_TOKEN.npm run buildconfirms@applyresolves to the theme vars in the compiled CSS.