Restore syntax highlighting in playground editors - #91
Conversation
Implements a lightweight regex-based TypeScript tokenizer in playground-runtime.js that highlights keywords, strings, comments, numbers, and literal values using the transparent-textarea overlay technique. Contenteditable pre editors are normalized to textareas for consistent behavior. Highlight styles are injected dynamically so all playground pages get syntax coloring automatically. Agent-Logs-Url: https://github.com/githubnext/tsessebe/sessions/8acf129f-eb1b-4d7f-858c-d6e0399628fc Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
…font Agent-Logs-Url: https://github.com/githubnext/tsessebe/sessions/8acf129f-eb1b-4d7f-858c-d6e0399628fc Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
|
Warning The 🤖 Evergreen fix applied Resolved merge conflict in
All three conflict regions resolved cleanly; JS syntax verified with
|
|
@copilot resolve the merge conflicts in this pull request |
…x-highlighting # Conflicts: # playground/playground-runtime.js Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
Resolved the merge conflicts in |
Playground code editors lost syntax coloring. This adds a lightweight regex-based TypeScript tokenizer using the transparent-textarea overlay technique — no external dependencies.
Changes
playground/playground-runtime.jshighlightCode()— single-pass regex tokenizer for keywords, strings, comments, numbers, literals<pre>behind a transparent<textarea>(caret stays visible viacaret-color)injectHighlightStyles()— dynamic CSS injection so all pages get highlighting with zero per-page changes<pre>editors auto-converted to<textarea>for consistencydocs/playground.md— removed syntax highlighting from Non-GoalsColor scheme (GitHub Dark)
import,const,new, …)#ff7b72#a5d6ff#8b949eitalic#79c0ffScreenshot
Known limitation
Template literals with
${expr}are highlighted as a single string token. Acceptable for tutorial code.