docs: fix code block titles not showing in UI docs (#13119)

www/apps/ui/contentlayer.config.ts

@@ -4,6 +4,7 @@ import { defineDocumentType, makeSource } from "contentlayer/source-files"
 import rehypeSlug from "rehype-slug"
 import { uiRehypePlugin } from "../../packages/remark-rehype-plugins/src"
 import { ExampleRegistry } from "./src/registries/example-registry"
+import rehypeMdxCodeProps from "rehype-mdx-code-props"
 
 export const Doc = defineDocumentType(() => ({
   name: "Doc",
@@ -38,6 +39,13 @@ export default makeSource({
         },
       ],
       [rehypeSlug],
+      [
+        // @ts-expect-error issue with type compatibility
+        rehypeMdxCodeProps,
+        {
+          tagName: "code",
+        },
+      ],
     ],
     mdxOptions: (options) => {
       return {

www/apps/ui/package.json

@@ -33,6 +33,7 @@
     "postcss": "8.4.27",
     "react": "rc",
     "react-dom": "rc",
+    "rehype-mdx-code-props": "^3.0.1",
     "rehype-slug": "^6.0.0",
     "remark": "^14.0.3",
     "slugify": "^1.6.6",

www/yarn.lock

@@ -16618,6 +16618,7 @@ turbo@latest:
     react: rc
     react-docgen: ^7.1.0
     react-dom: rc
+    rehype-mdx-code-props: ^3.0.1
     rehype-slug: ^6.0.0
     remark: ^14.0.3
     remark-rehype-plugins: "*"