chore: props table ui

Author: jer3m01

docs/package.json

@@ -16,6 +16,7 @@
     "@solidjs/router": "^0.15.3",
     "@solidjs/start": "^1.1.0",
     "monaco-editor": "^0.52.2",
+    "shiki": "^3.4.2",
     "solid-docgen": "workspace:*",
     "solid-js": "^1.9.5",
     "typescript": "^5.8.3",

docs/src/component/PropsTable.css

@@ -0,0 +1,22 @@
+html[data-theme="dark"] .shiki,
+html[data-theme="dark"] .shiki span {
+  color: var(--1) !important;
+  background-color: var(--1-bg) !important;
+  /* Optional, if you also want font styles */
+  font-style: var(--1-font-style) !important;
+  font-weight: var(--1-font-weight) !important;
+  text-decoration: var(--1-text-decoration) !important;
+}
+
+.shiki, .shiki span {
+  --0-bg: var(--sb-code-background-color) !important;
+  --1-bg: var(--sb-code-background-color) !important;
+}
+
+.props-table-type {  
+  display: inline-block;
+	font-size: .9em;
+	padding: 0.1em 0.3em;
+	border-radius: var(--sb-border-radius);
+  background-color: var(--sb-code-background-color);
+}

docs/src/component/PropsTable.tsx

@@ -1,12 +1,19 @@
 import { mdxComponents } from "@kobalte/solidbase/client";
+import { createHighlighter } from "shiki";
 import type { Documentation } from "solid-docgen";
 import { stringifyType } from "solid-docgen/stringify";
-import { Dynamic, For, Show } from "solid-js/web";
+import { Dynamic, For, NoHydration } from "solid-js/web";
+import "./PropsTable.css";
 
 interface PropsTableProps {
 	docgen: Documentation;
 }
 
+const highlighter = await createHighlighter({
+	themes: ["github-dark", "github-light"],
+	langs: ["typescript"],
+});
+
 export function PropsTable(props: PropsTableProps) {
 	return (
 		<>
@@ -16,8 +23,6 @@ export function PropsTable(props: PropsTableProps) {
 				<thead>
 					<tr>
 						<th>Prop</th>
-						<th>Type</th>
-						<th>Default</th>
 						<th>Description</th>
 					</tr>
 				</thead>
@@ -32,18 +37,23 @@ export function PropsTable(props: PropsTableProps) {
 									</Dynamic>
 								</td>
 								<td>
-									<Dynamic component={mdxComponents.code}>
-										{stringifyType(propValue.type)}
-									</Dynamic>
-								</td>
-								<td>
-									<Show when={propValue.defaultValue}>
-										<Dynamic component={mdxComponents.code}>
-											{stringifyType(propValue.defaultValue!, "  ", ",")}
-										</Dynamic>
-									</Show>
+									<NoHydration>
+										<span class="props-table-type" innerHTML={highlighter.codeToHtml(
+											stringifyType(propValue.type) + (propValue.defaultValue ? ` = ${stringifyType(propValue.defaultValue!, "  ", ",")}` : "" ),
+											{
+												lang: "typescript",
+												themes: {
+													0: "github-light",
+													1: "github-dark",
+												},
+												defaultColor: "0",
+												cssVariablePrefix: "--",
+											}
+										)}/>
+										<br />
+									</NoHydration>
+									{propValue.description}
 								</td>
-								<td>{propValue.description}</td>
 							</tr>
 						)}
 					</For>

pnpm-lock.yaml

@@ -53,7 +53,7 @@ export function stringifyType(
 		obj += "}";
 
 		if (obj.replaceAll(/\$SOLID_DOCGEN_NEWLINE\$\s*/g, " ").length < maxObjLen)
-			obj = obj.replaceAll(/\$SOLID_DOCGEN_NEWLINE\$\s+/g, " ");
+			obj = obj.replaceAll(/\$SOLID_DOCGEN_NEWLINE\$\s*/g, " ");
 		else obj = obj.replaceAll("$SOLID_DOCGEN_NEWLINE$", "\n");
 
 		return obj;