From 3c4de642abc3c33a04c35aec3dcad3096efd6d01 Mon Sep 17 00:00:00 2001
From: zhwcreate <3331598351@qq.com>
Date: Tue, 5 Nov 2024 17:52:43 +0800
Subject: [PATCH] feat: codeFenced

---
 src/app/(app)/notes/[nid]/test.md       |  5 +++++
 src/components/ui/markdown/Markdown.tsx | 12 +++++++++++-
 src/styles/md.css                       | 13 +++++++++++++
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/app/(app)/notes/[nid]/test.md b/src/app/(app)/notes/[nid]/test.md
index 5fe7c7e..cbd04c0 100644
--- a/src/app/(app)/notes/[nid]/test.md
+++ b/src/app/(app)/notes/[nid]/test.md
@@ -4,6 +4,11 @@
 
 整个博客，不仅仅由 yyblog 组成，还有 ybg-cli 脚手架，用于自动创建删除文章以及编译文章。
 ![Minion](https://octodex.github.com/images/minion.png)
+```javascript
+console.log("Hello, world!");console.log("Hello, world!");
+console.log("Hello, world!");console.log("Hello, world!");
+console.log("Hello, world!");console.log("Hello, world!");
+```
 
 - **yyblog**
 
diff --git a/src/components/ui/markdown/Markdown.tsx b/src/components/ui/markdown/Markdown.tsx
index 2fc3801..ce78f8e 100644
--- a/src/components/ui/markdown/Markdown.tsx
+++ b/src/components/ui/markdown/Markdown.tsx
@@ -91,7 +91,17 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren &
               );
             },
           },
-
+          codeFenced: {
+            parse(capture) {
+              return {
+                content: capture[4],
+                lang: capture[2] || undefined,
+                type: 'codeBlock',
+
+                attrs: capture[3],
+              };
+            },
+          },
           ...extendsRules,
           ...renderers,
         },
diff --git a/src/styles/md.css b/src/styles/md.css
index 7965250..c84e4b5 100644
--- a/src/styles/md.css
+++ b/src/styles/md.css
@@ -131,3 +131,16 @@
     --highlighted: 1;
   }
 }
+
+.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  opacity: 0.7;
+  font-weight: 600 !important;
+  font-size: 0.875em !important;
+}
+
+.prose :where(code):not(:where([class~="not-prose"] *, pre *)) {
+  padding: 1px 8px;
+  border-radius: .0625rem;
+  color: var(--accent-color) !important;
+}
+