fixes

Author: FranciscoMoretti

components/MDXComponents.tsx

@@ -20,10 +20,10 @@ export const components: MDXComponents = {
     ...props
   }: React.HTMLAttributes<HTMLPreElement> & { __rawcode__?: string; __withmeta__?: string }) => {
     return (
-      <>
+      <div className="relative">
         <pre
           className={cn(
-            'relative mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg bg-[#262626] p-0',
+            'relative my-2 max-h-[650px] overflow-x-auto rounded-lg bg-[#262626] p-0',
             className
           )}
           {...props}
@@ -38,7 +38,7 @@ export const components: MDXComponents = {
             )}
           />
         )}
-      </>
+      </div>
     )
   },
   code: ({
@@ -54,7 +54,7 @@ export const components: MDXComponents = {
     <>
       <code
         className={cn(
-          'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm before:hidden after:hidden',
+          'rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm before:hidden after:hidden',
           // When pre is parent, these are non-inline code blocks
           '[pre_&]:bg-transparent [pre_&]:p-4 ',
           className

css/rehype-code.css

@@ -1,22 +1,22 @@
-[data-rehype-pretty-code-figure] {
+figure[data-rehype-pretty-code-fragment] {
   @apply relative;
 }
 
-[data-rehype-pretty-code-figure] code {
+[data-rehype-pretty-code-fragment] code {
   @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
   counter-reset: line;
   box-decoration-break: clone;
 }
 
-[data-rehype-pretty-code-figure] .line {
+[data-rehype-pretty-code-fragment] .line {
   @apply inline-block min-h-[1rem] w-full px-4 py-0.5;
 }
 
-[data-rehype-pretty-code-figure] [data-line-numbers] .line {
+[data-rehype-pretty-code-fragment] [data-line-numbers] .line {
   @apply px-2;
 }
 
-[data-rehype-pretty-code-figure] [data-line-numbers] > .line::before {
+[data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
   @apply text-xs text-muted-foreground/40;
   counter-increment: line;
   content: counter(line);
@@ -26,19 +26,19 @@
   text-align: right;
 }
 
-[data-rehype-pretty-code-figure] .line--highlighted {
+[data-rehype-pretty-code-fragment] .line--highlighted {
   @apply bg-muted;
 }
 
-[data-rehype-pretty-code-figure] .line-highlighted span {
+[data-rehype-pretty-code-fragment] .line-highlighted span {
   @apply relative;
 }
 
-[data-rehype-pretty-code-figure] .word--highlighted {
+[data-rehype-pretty-code-fragment] .word--highlighted {
   @apply rounded-md border border-muted bg-muted p-1;
 }
 
-.dark [data-rehype-pretty-code-figure] .word--highlighted {
+.dark [data-rehype-pretty-code-fragment] .word--highlighted {
   @apply bg-zinc-900;
 }