fix: 修复代码块样式错误

huayemao · Jun 21, 2024 · 822e743 · 822e743
1 parent bf91648
commit 822e743
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 36 deletions.
diff --git a/components/Post/ContentModal.tsx b/components/Post/ContentModal.tsx
@@ -96,7 +96,7 @@ function ContentModal() {
       >
         <div
           contentEditable
-          className="prose lg:prose-xl prose-code:bg-primary-100 prose-code:text-primary-500 prose-code:font-medium w-full h-full max-w-full"
+          className="prose lg:prose-xl w-full h-full max-w-full"
           style={{
             columns: "2 auto",
             columnRule: "1px solid #e5e7eb",

diff --git a/components/Post/index.tsx b/components/Post/index.tsx
@@ -62,7 +62,7 @@ export default async function Post({ data: post, recentPosts: posts }: Props) {
                   className={
                     c.content +
                     " " +
-                    "dark:prose-invert prose lg:prose-xl py-6 prose-code:bg-primary-100 prose-code:text-primary-500 prose-code:font-medium overflow-hidden"
+                    "dark:prose-invert prose lg:prose-xl py-6 overflow-hidden"
                   }
                 >
                   {content}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,44 +16,50 @@ module.exports = withShurikenUI({
       nui: {},
       typography: {
         DEFAULT: {
-          css: [{
-            ul: {
-              breakInside: 'avoid',
-            },
-            ol: {
-              breakInside: 'avoid',
-            },
-            blockquote: {
-              breakInside: 'avoid',
-            },
-            table: {
-              '@media (max-width: 576px)': {
-                // 如果 table 设置成 display:block 来产生滚动条会导致内容无法自动扩展到全宽
-                td: {
-                  wordBreak: 'break-all'
-                }
+          css: [
+            {
+              code: {
+                fontWeight: 500,
+                color: 'rgb(99,102,241)',
+                backgroundColor: 'rgb(224,231,255)'
+              },
+              ul: {
+                breakInside: 'avoid',
+              },
+              ol: {
+                breakInside: 'avoid',
+              },
+              blockquote: {
+                breakInside: 'avoid',
               },
-            },
-            figure: {
-              marginBottom: '2em',
-              figcaption: { textAlign: 'center' },
-              img: {
-                marginBottom: 0,
-              }
-            },
-            tr: {
-              th: {
-                '&:first-child': {
-                  whiteSpace: 'nowrap'
+              table: {
+                '@media (max-width: 576px)': {
+                  // 如果 table 设置成 display:block 来产生滚动条会导致内容无法自动扩展到全宽
+                  td: {
+                    wordBreak: 'break-all'
+                  }
+                },
+              },
+              figure: {
+                marginBottom: '2em',
+                figcaption: { textAlign: 'center' },
+                img: {
+                  marginBottom: 0,
                 }
               },
-              td: {
-                '&:first-child': {
-                  whiteSpace: 'nowrap'
+              tr: {
+                th: {
+                  '&:first-child': {
+                    whiteSpace: 'nowrap'
+                  }
                 },
-              }
-            },
-          }]
+                td: {
+                  '&:first-child': {
+                    whiteSpace: 'nowrap'
+                  },
+                }
+              },
+            }]
         }
       },
       fontFamily: {