Update rehype-pretty-code

apps/docs/content/docs/ui/components/codeblock.mdx

@@ -60,7 +60,7 @@ module.exports = withContentlayer(config)
 
 ## Example
 
-```js title="next.config.js" {10}
+```js title="next.config.js" {10} /config/
 /** @type {import('next').NextConfig} */
 const config = {
   pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],

packages/next-docs-ui/css/styles.css

@@ -12,16 +12,16 @@ body {
   @apply nd-bg-background nd-text-foreground;
 }
 
-[data-rehype-pretty-code-fragment] code {
-  @apply nd-grid nd-py-4;
+[data-line] {
+  @apply nd-px-4 nd-border-l-2 nd-border-transparent;
 }
 
-[data-rehype-pretty-code-fragment] .line {
-  @apply nd-pl-4 nd-pr-8;
+[data-highlighted-line] {
+  @apply nd-border-primary nd-bg-primary/10;
 }
 
-[data-rehype-pretty-code-fragment] .line-highlighted {
-  @apply nd-border-l-2 nd-border-l-primary nd-bg-primary/10;
+[data-highlighted-chars] {
+  @apply nd-bg-primary/10 nd-border-b-2 nd-border-primary;
 }
 
 [data-rmiz-modal-overlay='visible'] {

packages/next-docs-ui/src/components/mdx/pre.tsx

@@ -21,7 +21,7 @@ export function Pre({ title, allowCopy = true, ...props }: PreProps) {
   return (
     <div
       className="nd-relative nd-group nd-border nd-rounded-lg nd-overflow-hidden nd-text-sm nd-bg-secondary/50 nd-not-prose"
-      data-rehype-pretty-code-fragment
+      data-code-fragment
     >
       {title && (
         <div className="nd-text-muted-foreground nd-bg-muted nd-pl-4 nd-pr-12 nd-py-2 nd-border-b nd-z-[2]">
@@ -30,16 +30,12 @@ export function Pre({ title, allowCopy = true, ...props }: PreProps) {
       )}
       {allowCopy && (
         <CopyButton
-          className={
-            title
-              ? 'nd-absolute nd-top-1 nd-right-2'
-              : 'nd-absolute nd-top-2 nd-right-2'
-          }
+          className={cn('nd-absolute nd-top-2 nd-right-2', title && 'nd-top-1')}
           onCopy={onCopy}
         />
       )}
       <ScrollArea>
-        <pre {...props} ref={ref}>
+        <pre ref={ref} {...props} className={cn('nd-py-4', props.className)}>
           {props.children}
         </pre>
       </ScrollArea>

packages/next-docs/package.json

@@ -100,7 +100,7 @@
     "negotiator": "^0.6.3",
     "react-remove-scroll": "^2.5.6",
     "rehype-img-size": "^1.0.1",
-    "rehype-pretty-code": "^0.9.5",
+    "rehype-pretty-code": "^0.10.1",
     "remark": "^14.0.3",
     "remark-gfm": "^3.0.1",
     "remark-mdx": "^2.3.0",

packages/next-docs/src/mdx-plugins/rehype-next-docs.js

@@ -12,20 +12,13 @@ const customMetaRegex = /custom="([^"]+)"/
  */
 const rehypePrettyCodeOptions = {
   theme: 'css-variables',
-  keepBackground: false,
-  onVisitLine(node) {
-    if (node.children.length === 0) {
-      node.children = [{ type: 'text', value: ' ' }]
-    }
+  defaultLang: {
+    block: 'text'
   },
+  grid: true,
+  keepBackground: false,
   filterMetaString(s) {
     return s.replace(customMetaRegex, '')
-  },
-  onVisitHighlightedLine(node) {
-    node.properties.className.push('line-highlighted')
-  },
-  onVisitHighlightedWord(node) {
-    node.properties.className = ['word-highlighted']
   }
 }
 
@@ -51,9 +44,6 @@ export const rehypeNextDocs = () => async tree => {
       if (typeof codeEl.data?.meta === 'string') {
         node.nd_custom = codeEl.data.meta.match(customMetaRegex)?.[1]
       }
-
-      // Add default language `text` for code-blocks
-      codeEl.properties.className ||= ['language-text']
     }
   })