You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Blog code fences rendered monochrome. This highlights them at SSR (zero client JS) by reusing the canonical tokenizer in website/lib/highlight.ts, the same token classes the home page and @webjsdev/ui docs use, so colors match across every WebJs surface.
What changed
website/lib/highlight.ts: new highlightToHtml(code) string emitter (reuses the existing tokenize() + CLASS map; HTML-escapes token text).
Token color CSS (.t-*, light + dark) promoted from the inline app/page.ts block to global public/input.css so the blog route inherits it. Home page still loads the same palette from the global sheet.
Test plan
Unit: highlightToHtml spans + escaping of <, &, backticks
Unit: render-post ts fence highlights, sh fence stays plain
Visual: /blog/ code blocks colored; home page unchanged
First self-review round caught a real one. The highlighted-language set included '' (empty language), so a bare ```` fence got run through the JS tokenizer. Blog posts use bare fences for command output (the-naming-saga has npm error text; the new JS-concepts post has a serializer probe-output block), and JS-tokenizing that mis-colors words like `Forbidden` and `403`.
Fixed in 1cc566a: bare and unknown-language fences stay plain escaped text; only ts/tsx/js/jsx/javascript/typescript highlight, matched case-insensitively. Added tests pinning a bare fence to plain output (the counterfactual that would have caught this) and a case-insensitive lang. Verified live: the-naming-saga now renders 0 token spans, the JS-concepts post keeps its ts fences colored but leaves the probe-output block plain.
Rendered all 42 blog posts through the renderer: zero tokenizer errors. The language gate holds. Across the corpus there are 144 bare fences and 14 sh plus a few json/jsonc/html fences that all stay plain, and 94 ts / 5 js / 1 tsx fences that highlight. Nothing else to fix.
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
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.
Closes #897
Blog code fences rendered monochrome. This highlights them at SSR (zero client JS) by reusing the canonical tokenizer in
website/lib/highlight.ts, the same token classes the home page and@webjsdev/uidocs use, so colors match across every WebJs surface.What changed
website/lib/highlight.ts: newhighlightToHtml(code)string emitter (reuses the existingtokenize()+CLASSmap; HTML-escapes token text).website/modules/blog/utils/render-post.ts: JS/TS fences render highlighted spans;sh/plain fences stay escaped text..t-*, light + dark) promoted from the inlineapp/page.tsblock to globalpublic/input.cssso the blog route inherits it. Home page still loads the same palette from the global sheet.Test plan
highlightToHtmlspans + escaping of<,&, backticksrender-postts fence highlights, sh fence stays plainDraft while I add tests and self-review.