[docs-infra] Add More Highlighting Extensions

docs/app/docs-infra/components/code-highlighter/demos/syntax.css

@@ -4,6 +4,8 @@
   --color-docs-infra-syntax-number: #0550ae;
   --color-docs-infra-syntax-boolean: #0550ae;
   --color-docs-infra-syntax-nullish: #59636e;
+  --color-docs-infra-syntax-property-string: #0550ae;
+  --color-docs-infra-syntax-object-property: #0550ae;
   --color-docs-infra-syntax-attr-key: #0550ae;
   --color-docs-infra-syntax-attr-value: #0a3069;
   --color-docs-infra-syntax-attr-equals: #24292f;
@@ -12,7 +14,11 @@
   --color-docs-infra-syntax-css-value: #0550ae;
   --color-docs-infra-syntax-this: #cf222e;
   --color-docs-infra-syntax-builtin-type: #0550ae;
+  --color-docs-infra-syntax-punctuation: #24292f;
+  --color-docs-infra-syntax-template-expression: #24292f;
+  --color-docs-infra-syntax-template-delimiter: #24292f;
   --color-docs-infra-syntax-jsx: #116329;
+  --color-docs-infra-syntax-jsx-variable: #953800;
   --color-docs-infra-syntax-html-tag: #0550ae;
   --color-docs-infra-syntax-jsx-tag: #116329;
   --docs-infra-syntax-line-height: 18.5px;
@@ -30,6 +36,14 @@
   color: var(--color-docs-infra-syntax-nullish);
 }
 
+.di-ps {
+  color: var(--color-docs-infra-syntax-property-string);
+}
+
+.di-op {
+  color: var(--color-docs-infra-syntax-object-property);
+}
+
 .di-ak {
   color: var(--color-docs-infra-syntax-attr-key);
 }
@@ -62,10 +76,28 @@
   color: var(--color-docs-infra-syntax-builtin-type);
 }
 
+.di-pu {
+  color: var(--color-docs-infra-syntax-punctuation);
+}
+
+/* Template-literal interpolation: reset the `${ ... }` expression away from the
+ * enclosing string color. Inner `pl-*` tokens keep their own colors on top. */
+.di-te {
+  color: var(--color-docs-infra-syntax-template-expression);
+}
+
+.di-td {
+  color: var(--color-docs-infra-syntax-template-delimiter);
+}
+
 .di-jsx {
   color: var(--color-docs-infra-syntax-jsx);
 }
 
+.di-jv {
+  color: var(--color-docs-infra-syntax-jsx-variable);
+}
+
 .di-ht {
   color: var(--color-docs-infra-syntax-html-tag);
 }

docs/app/docs-infra/hooks/use-code-window/demos/CollapsibleDemoContent.tsx

@@ -10,7 +10,7 @@ import { CodeActionsMenu } from '../../../components/code-highlighter/demos/Code
 import { CodeBlockHeader } from '../../../components/code-highlighter/demos/CodeBlockHeader';
 import styles from './CollapsibleDemoContent.module.css';
 
-import '@wooorm/starry-night/style/light';
+import '../../../components/code-highlighter/demos/syntax.css';
 
 export function CollapsibleDemoContent(props: ContentProps<object>) {
   // @focus-start @padding 1

docs/app/docs-infra/pipeline/parse-source/page.mdx

@@ -147,16 +147,24 @@ During parsing, `parseSource` extends the highlighted tree with **additive** `di
 | `di-this` | Self-reference keyword                  | `this`, `super`                                    |
 | `di-bt`   | Built-in type keyword                   | `string`, `number`, `boolean`, `void`, `never`     |
 | `di-jsx`  | JSX component element                   | `Button` in `<Button />`, `</Button>`              |
+| `di-jv`   | JSX expression variable                 | `age` in `<Select value={age} />`                  |
 | `di-ak`   | Attribute key                           | `className` in `<div className="x">`               |
 | `di-ae`   | Attribute equals                        | `=` in `<div className="x">`                       |
 | `di-av`   | Attribute value                         | `"x"` in `<div className="x">`                     |
+| `di-pu`   | Symbolic punctuation                    | `=`, `=>`, `&&`, `\|\|`, `...`, `+`                |
+| `di-op`   | Object property name                    | `height` in `{ height: 400 }`                      |
+| `di-ps`   | Object property string                  | `'aria-label'` in `{ 'aria-label': 'x' }`          |
+| `di-te`   | Template interpolation region           | `` `Hi ${user.name}` `` (the `${user.name}` slice) |
+| `di-td`   | Template interpolation delimiter        | `${` and `}` in `` `${value}` ``                   |
 | `di-da`   | CSS data attribute selector             | `data-active` in `[data-active]{:css}`             |
 | `di-cp`   | CSS property name                       | `color` in `div { color: red }{:css}`              |
 | `di-cv`   | CSS property value                      | `flex` in `div { display: flex }{:css}`            |
 | `di-ht`   | HTML tag wrapper (inline only)          | `<div>`, `</span>` (wraps brackets + tag name)     |
 | `di-jt`   | JSX component tag wrapper (inline only) | `<Box>`, `</Stack>` (wraps brackets + tag name)    |
 
-`di-this` applies to JS/TS family grammars (`.js`, `.ts`, `.tsx`, `.jsx`, `.mdx`). `di-bt` applies to TS family grammars only (`.ts`, `.tsx`, `.jsx`, `.mdx`) — plain JS is excluded because `string`, `number`, etc. are valid variable names. `di-jsx` only applies to JSX grammars (`.tsx`, `.jsx`, `.mdx`). `di-ak`, `di-ae`, `di-av` only apply to HTML/JSX/MDX grammars. `di-da`, `di-cp`, and `di-cv` only apply to CSS. `di-ht` and `di-jt` are added by `enhanceCodeInline` (not `parseSource`) as wrapper spans around tag brackets and the inner `pl-ent` or `pl-c1` span.
+`di-this` applies to JS/TS family grammars (`.js`, `.ts`, `.tsx`, `.jsx`, `.mdx`). `di-bt` applies to TS family grammars only (`.ts`, `.tsx`, `.jsx`, `.mdx`) — plain JS is excluded because `string`, `number`, etc. are valid variable names. `di-jsx` and `di-jv` only apply to JSX grammars (`.tsx`, `.jsx`, `.mdx`); `di-jv` is added to identifier spans (`pl-smi`, `pl-v`) appearing inside JSX expression braces (`{...}`), including spread arguments, arrow-function parameters, and `pl-c1` member-access property names (e.g. `name` in `{row.name}`). Object property keys inside JSX expressions also receive `di-jv` in addition to `di-op`. `di-ak`, `di-ae`, `di-av` only apply to HTML/JSX/MDX grammars. `di-pu` applies to all grammars and tags `pl-k` operator tokens whose text is purely symbolic (it is not added to word keywords like `const` or `if`). `di-op` applies to JS-family grammars and tags both bare-identifier object keys (e.g. `height` in `{ height: 400 }`) and string keys (e.g. `'aria-label'`); string keys additionally receive `di-ps`. `di-da`, `di-cp`, and `di-cv` only apply to CSS. `di-ht` and `di-jt` are added by `enhanceCodeInline` (not `parseSource`) as wrapper spans around tag brackets and the inner `pl-ent` or `pl-c1` span.
+
+`di-te` and `di-td` apply to JS-family grammars and handle template-literal interpolations (`` `...${expr}...` ``). Starry Night tokenizes the whole backtick string as a single `pl-s` span, so without these classes the `${`/`}` delimiters and any bare punctuation inside the expression (e.g. `.` in `${a.b}`) inherit the string color. `parseSource` wraps each `${ ... }` slice in a `di-te` span so the interpolated expression resets from the string color, and wraps the `${` and `}` glyphs themselves in `di-td` spans. Inner `pl-*` tokens (and additive `di-*` classes such as `di-num` on `${42}`) still apply on top of the reset. Only backtick template literals are processed — a `${...}` sequence inside a regular `"`/`'` string is inert text and is left untouched. Because a multi-line template literal is tokenized as one `pl-s` span per line, an interpolation that spans several lines is wrapped with a separate `di-te` slice on each line (mirroring how the string itself continues across lines).
 
 Existing `pl-*` classes are never removed — `<span class="pl-c1">42</span>` becomes `<span class="pl-c1 di-num">42</span>`.