feat: md 图片拓展

Author: coderz-w

src/app/(app)/notes/[nid]/test.md

@@ -26,7 +26,6 @@
   这是详细的内容，可以在点击时展开。
 </details>
 
-
 效仿 Hexo 采用纯前端，文章编写删除编译都在本地运行，对前端工程师更友好。
 Nextjs 同时也支持全栈开发。简单的 sql 语句也能够对文章进行增删改查。
 

src/components/ui/markdown/Markdown.tsx

@@ -10,6 +10,7 @@ import { memo, Suspense, useMemo, useRef } from 'react';
 
 import { MParagraph } from './renderbers/paragraph';
 import { MHeader } from './renderbers/heading';
+import { MarkdownImage } from './renderbers/images';
 
 export interface MdProps {
   value?: string;
@@ -56,6 +57,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren &
         wrapper: null,
         overrides: {
           p: MParagraph,
+          img: MarkdownImage,
           script: allowsScript ? Script : undefined,
           ...overrides,
         },

src/components/ui/markdown/renderbers/images.tsx

@@ -0,0 +1,8 @@
+export const MarkdownImage = (props: { src: string; alt?: string }) => {
+  return (
+    <span className="flex w-full flex-col items-center border-none mdImg">
+      <img src={props.src} alt={props.alt} loading="lazy" className="mx-auto w-[50%] rounded-md" />
+      <span className=" w-full">居中文本</span>
+    </span>
+  );
+};

src/styles/mdContainer.css

@@ -11,24 +11,21 @@
 :global .paragraph:first-child {
   margin-bottom: 4rem;
 }
-.with-indent ul span,
-.with-indent .paragraph span {
-  border-bottom: 1px solid;
-  /* @apply border-accent/20 dark:border-accent/20; */
-  @apply border-accent/10; /* Tailwind CSS特性，需要替换为具体的CSS */
-}
-@media print {
-  .with-indent ul span,
-  .with-indent .paragraph span {
-    @apply border-none; /* Tailwind CSS特性，需要替换为具体的CSS */
-  }
-}
+
 .with-indent blockquote::before {
   display: none !important;
 }
 .with-indent blockquote .paragraph > span {
   margin-left: 0 !important;
 }
+.mdImg span {
+  display: inline-block !important;
+  margin-left: 0 !important;
+  margin-right: 0 auto; 
+  padding: 0; 
+  text-align: center;
+}
+
 .with-indent blockquote .paragraph:first-child::first-letter {
   float: none !important;
   font-size: inherit !important;