fix: comment markdown style

Signed-off-by: Innei <i@innei.in>
Innei · May 2, 2024 · 03bc7b1 · 03bc7b1
1 parent f754c13
commit 03bc7b1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 23 deletions.
diff --git a/src/components/modules/comment/Comment.module.css b/src/components/modules/comment/Comment.module.css
@@ -1,6 +1,6 @@
 .comment__message {
   * {
-    @apply break-all leading-6;
+    @apply break-words leading-6;
   }
 
   h1,
@@ -35,7 +35,20 @@
   }
 
   blockquote {
-    @apply my-1 border-l-4 border-zinc-400 pl-2;
+    @apply pl-3;
+    @apply relative mb-2 border-0 text-base-content/60;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 3px;
+      bottom: 5px;
+      position: absolute;
+      left: 0;
+      top: 5px;
+      border-radius: 24px;
+      background-color: theme(colors.accent);
+    }
   }
 
   img,
@@ -45,17 +58,8 @@
     max-height: 350px;
   }
 
-  pre {
-    @apply my-1.5 whitespace-break-spaces;
-  }
-
-  pre,
-  code:not([class^='language-']) {
-    @apply rounded-md bg-zinc-700/10 px-1.5 py-0.5 text-zinc-900;
-  }
-
-  pre > code {
-    @apply my-1 rounded-xl bg-zinc-100 p-2 !important;
+  :global(.shiki-block) {
+    @apply my-1;
   }
 }
 
@@ -67,13 +71,4 @@
   blockquote {
     @apply border-zinc-50/50;
   }
-
-  pre,
-  code:not([class^='language-']) {
-    @apply bg-zinc-200/20 text-zinc-50;
-  }
-
-  pre > code {
-    @apply bg-zinc-900 !important;
-  }
 }
diff --git a/src/components/ui/code-highlighter/shiki/ShikiWrapper.tsx b/src/components/ui/code-highlighter/shiki/ShikiWrapper.tsx
@@ -86,7 +86,7 @@ export const ShikiHighLighterWrapper = forwardRef<
 
   return (
     <div
-      className={clsx(styles['code-card'], 'group')}
+      className={clsx(styles['code-card'], 'shiki-block group')}
       onCopy={stopPropagation}
     >
       {!!filename && (