feat(web): shiki syntax highlighting for code surfaces
One highlighter for the client: a synchronous fine-grained shiki core (JS regex engine, no WASM) in ui-primitives with an explicit grammar allowlist (typescript, shellscript, json — aliases resolve, unknown languages take a geometry-identical plain arm). The shared CodeBlock component owns both arms; markdown fences, the run_code expanded program body (typescript), and the details panel Input (json) all route through it. Token colors live in a new ui-theme shiki.css sheet as --shiki-* custom properties (light/dark blocks), wired through the shell's base.css chain — tokens-only styling holds; shiki's generated span tree is the sanctioned innerHTML path (static output, no user HTML). jsdom specs pin token spans, aliases, both fallbacks, and the fence route; the built-bundle snapshot asserts the highlighted program under the code row.
This commit is contained in:
31
packages/client/ui-theme/src/styles/shiki.css
Normal file
31
packages/client/ui-theme/src/styles/shiki.css
Normal file
@@ -0,0 +1,31 @@
|
||||
/* Syntax-highlight token palette: the values behind shiki's css-variables
|
||||
theme (--shiki-* custom properties emitted by the ui-primitives CodeBlock).
|
||||
Light values on :root, dark overrides on the body attribute — the same
|
||||
cascade as every other token sheet. Background/foreground deliberately
|
||||
alias the markdown code-block tokens so highlighted and plain blocks agree. */
|
||||
|
||||
:root {
|
||||
--shiki-foreground: var(--dsw-alias-label-primary);
|
||||
--shiki-background: var(--dsw-alias-markdown-code-block);
|
||||
--shiki-token-constant: #1c7ed6;
|
||||
--shiki-token-string: #2f9e44;
|
||||
--shiki-token-comment: #868e96;
|
||||
--shiki-token-keyword: #d6336c;
|
||||
--shiki-token-parameter: #e8590c;
|
||||
--shiki-token-function: #6741d9;
|
||||
--shiki-token-string-expression: #2b8a3e;
|
||||
--shiki-token-punctuation: #495057;
|
||||
--shiki-token-link: #1971c2;
|
||||
}
|
||||
|
||||
body[data-ds-dark-theme] {
|
||||
--shiki-token-constant: #4dabf7;
|
||||
--shiki-token-string: #69db7c;
|
||||
--shiki-token-comment: #adb5bd;
|
||||
--shiki-token-keyword: #faa2c1;
|
||||
--shiki-token-parameter: #ffa94d;
|
||||
--shiki-token-function: #b197fc;
|
||||
--shiki-token-string-expression: #8ce99a;
|
||||
--shiki-token-punctuation: #ced4da;
|
||||
--shiki-token-link: #74c0fc;
|
||||
}
|
||||
Reference in New Issue
Block a user