feat: add title prop to SyntaxHighlight (#589)

* feat: add title prop to SyntaxHighlight * fix type * correct prerendering
zuplo · Jan 24, 2025 · 700098f · 700098f
1 parent 10d2c9e
commit 700098f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/zudoku/src/lib/components/SyntaxHighlight.tsx b/packages/zudoku/src/lib/components/SyntaxHighlight.tsx
@@ -41,6 +41,7 @@ type SyntaxHighlightProps = {
   copyable?: boolean;
   showLanguageIndicator?: boolean;
   language?: string;
+  title?: string;
 } & Omit<HighlightProps, "children" | "language">;
 
 const remapLang = {
@@ -50,6 +51,7 @@ const remapLang = {
 export const SyntaxHighlight = ({
   copyable = true,
   language = "plain",
+  title,
   ...props
 }: SyntaxHighlightProps) => {
   const { resolvedTheme } = useTheme();
@@ -70,12 +72,18 @@ export const SyntaxHighlight = ({
     <ClientOnly
       fallback={
         <div className="relative group">
+          {title && (
+            <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
+              {title}
+            </div>
+          )}
           <pre
             className={cn(
               "relative scrollbar overflow-x-auto",
               props.className,
               props.noBackground ? "!bg-transparent" : themeColorClasses,
               props.wrapLines && "whitespace-pre-wrap break-words",
+              title && "pt-10",
             )}
           >
             {props.code}
@@ -95,13 +103,19 @@ export const SyntaxHighlight = ({
       >
         {({ className, style, tokens, getLineProps, getTokenProps }) => (
           <div className="relative group">
+            {title && (
+              <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
+                {title}
+              </div>
+            )}
             <pre
               className={cn(
                 "relative scrollbar overflow-x-auto",
                 className,
                 props.className,
                 props.noBackground && "!bg-transparent",
                 props.wrapLines && "whitespace-pre-wrap break-words",
+                title && "pt-10",
               )}
               style={style}
             >

diff --git a/packages/zudoku/src/lib/util/MdxComponents.tsx b/packages/zudoku/src/lib/util/MdxComponents.tsx
@@ -61,7 +61,7 @@ export const MdxComponents = {
   code: ({ className, children, ...props }) => {
     // `inline` provided by the rehype plugin, as react-markdown removed support for that
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const inline = (props as any).inline;
+    const { inline, title } = props as Record<string, string | boolean>;
 
     if (inline === true || inline === "true") {
       return <InlineCode className={className}>{children}</InlineCode>;
@@ -75,6 +75,7 @@ export const MdxComponents = {
         className="rounded-xl p-4 border dark:!bg-foreground/10 dark:border-transparent"
         showLanguageIndicator
         code={String(children).trim()}
+        title={String(title) ?? undefined}
       />
     );
   },