Refine inline syntax highlighting in and outside of tables

mui · Dec 12, 2024 · 8facccc · 8facccc
1 parent e5f5ccc
commit 8facccc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/docs/src/components/TableCode.tsx b/docs/src/components/TableCode.tsx
@@ -57,5 +57,9 @@ export function TableCode({ children, printWidth = 40, ...props }: TableCodeProp
     children = unionGroups.flat();
   }
 
-  return <Code {...props}>{children}</Code>;
+  return (
+    <Code data-table-code="" {...props}>
+      {children}
+    </Code>
+  );
 }
diff --git a/docs/src/syntax-highlighting/index.css b/docs/src/syntax-highlighting/index.css
@@ -20,8 +20,22 @@
   }
 }
 
+/* Collapse most colors to blue for inline code */
 [data-inline] {
+  --syntax-default: var(--color-blue);
   --syntax-entity: var(--color-blue);
   --syntax-parameter: var(--color-blue);
   --syntax-variable: var(--color-blue);
+  --syntax-keyword: var(--color-blue);
+  --syntax-string: var(--color-blue);
+  --syntax-nullish: var(--color-blue);
+}
+
+/* Recover some of the syntax highlighting colors in tables */
+[data-table-code] {
+  --syntax-default: var(--color-foreground);
+  --syntax-entity: var(--color-violet);
+  --syntax-keyword: var(--color-red);
+  --syntax-string: var(--color-navy);
+  --syntax-nullish: var(--color-gray-500);
 }
diff --git a/docs/src/syntax-highlighting/rehypeInlineCode.mjs b/docs/src/syntax-highlighting/rehypeInlineCode.mjs
@@ -30,7 +30,7 @@ export function rehypeInlineCode() {
       node.children?.forEach((part) => {
         const text = part.children[0]?.value;
         if (text === 'undefined' || text === 'null' || text === '""' || text === "''") {
-          part.properties.style = 'color: var(--color-gray-500)';
+          part.properties.style = 'color: var(--syntax-nullish, inherit)';
         }
       });