UI: Fix code styles in headings

.changeset/tricky-snakes-grin.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-ui': patch
+---
+
+Fix code styles in headings

apps/docs/components/preview/index.tsx

@@ -29,13 +29,14 @@ const ImageZoom = dynamic(() =>
 export default {
   heading: (
     <Wrapper>
-      <Heading
-        id="preview"
-        as="h3"
-        className="!my-0 rounded-xl bg-fd-background p-4"
-      >
-        Hello World
-      </Heading>
+      <div className="rounded-lg bg-fd-background p-4 prose-no-margin">
+        <Heading id="preview" as="h3">
+          Hello World
+        </Heading>
+        <Heading id="preview" as="h3">
+          Hello <code>World</code> Everyone!
+        </Heading>
+      </div>
     </Wrapper>
   ),
   card: (

packages/ui/src/components/heading.tsx

@@ -17,13 +17,16 @@ export function Heading<T extends Types = 'h1'>({
   if (!props.id) return <As className={className} {...props} />;
 
   return (
-    <As className={cn('group inline-flex items-center scroll-m-20', className)} {...props}>
-      <a href={`#${props.id}`}>
+    <As
+      className={cn('flex scroll-m-20 flex-row items-center gap-2', className)}
+      {...props}
+    >
+      <a href={`#${props.id}`} className="peer">
         {props.children}
       </a>
       <Link
         aria-label="Link to section"
-        className="ms-2 size-4 text-fd-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+        className="size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100"
       />
     </As>
   );