💄 Update inline code blocks style (#1556)

* ✨ Remove `defaultLang` from `rehypePrettyCode` * 💄 Add styles for `code` block in theme * ✨ Disable `typography` `pre` & `code` styling
carloscuesta · Oct 28, 2024 · 9965e18 · 9965e18
1 parent 364bfbe
commit 9965e18
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/next.config.mjs b/next.config.mjs
@@ -44,7 +44,6 @@ const withMDX = createMDX({
             dark,
             light,
           },
-          defaultLang: 'plaintext',
         },
       ],
       [rehypeWrap, { selector: 'table', wrapper: 'div.responsiveTable' }],

diff --git a/src/utils/theme/theme.css b/src/utils/theme/theme.css
@@ -86,6 +86,10 @@ html {
   @apply underline;
 }
 
+code {
+  @apply text-sm py-[1px] px-1 inline-block rounded-md border bg-neutral-50 text-neutral-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-white;
+}
+
 code[data-theme],
 pre[data-theme] {
   white-space: pre;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -18,6 +18,14 @@ module.exports = {
       animation: {
         wave: 'wave 1.2s ease infinite',
       },
+      typography: {
+        DEFAULT: {
+          css: {
+            pre: false,
+            code: false,
+          },
+        },
+      },
     },
   },
   plugins: [require('@tailwindcss/typography')],
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,7 +44,6 @@ const withMDX = createMDX({ @@
                 dark,
                 light,
               },
-              defaultLang: 'plaintext',
             },
           ],
           [rehypeWrap, { selector: 'table', wrapper: 'div.responsiveTable' }],
@@ Expand Down @@