feat: codeFenced

coderz-w · Nov 5, 2024 · 3c4de64 · 3c4de64
1 parent c859a6d
commit 3c4de64
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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;
+}
+