feat: add demo

Signed-off-by: Innei <[email protected]>

Author: Innei

src/components/ui/markdown/Markdown.tsx

@@ -16,7 +16,6 @@ import { Gallery } from '../gallery'
 import { FixedZoomedImage } from '../image'
 import { LinkCard } from '../link-card'
 import styles from './markdown.module.css'
-import { CommentAtRule } from './parsers/comment-at'
 import { ContainerRule } from './parsers/container'
 import { InsertRule } from './parsers/ins'
 import { KateXRule } from './parsers/katex'
@@ -210,7 +209,7 @@ export const Markdown: FC<MdProps & MarkdownToJSX.Options & PropsWithChildren> =
         additionalParserRules: {
           spoilder: SpoilderRule,
           mention: MentionRule,
-          commentAt: CommentAtRule,
+
           mark: MarkRule,
           ins: InsertRule,
           kateX: KateXRule,

src/components/ui/markdown/customize.md

@@ -1,3 +1,35 @@
+## Token
+
+This is a ||Spoiler||
+
+A `code`.
+
+==mark== it.
+
+++Something Insert++
+
+## Latex
+
+$ c = \pm\sqrt{a^2 + b^2} $
+
+## Container
+
+::: warning
+_here be dragons_
+:::
+
+::: banner {error}
+_here be dragons_
+:::
+
+
+::: gallery
+https://loremflickr.com/640/480/city?1
+https://loremflickr.com/640/480/city?2
+https://loremflickr.com/640/480/city?3
+![](https://loremflickr.com/640/480/city?4 "Image")
+:::
+
 ## Rich Link
 
 ```

src/components/ui/markdown/markdown.module.css

@@ -92,7 +92,7 @@
     @apply cursor-not-allowed;
   }
 
-  code {
+  :not(pre) code {
     @apply bg-zinc-200 font-mono dark:bg-neutral-800;
   }
 

src/components/ui/markdown/parsers/comment-at.tsx

@@ -1,10 +1,10 @@
-import type { MarkdownToJSX } from 'markdown-to-jsx'
+import React from 'react'
 import {
-  Priority,
   parseCaptureInline,
+  Priority,
   simpleInlineRegex,
 } from 'markdown-to-jsx'
-import React from 'react'
+import type { MarkdownToJSX } from 'markdown-to-jsx'
 
 //  ==Mark==
 export const MarkRule: MarkdownToJSX.Rule = {
@@ -15,7 +15,7 @@ export const MarkRule: MarkdownToJSX.Rule = {
     return (
       <mark
         key={state?.key}
-        className="!bg-always-yellow-200 !rounded-lg !bg-opacity-80 !bg-none !text-black"
+        className="rounded-md bg-always-yellow-400 bg-opacity-80 px-1 text-black"
       >
         {output(node.content, state!)}
       </mark>

src/components/ui/markdown/parsers/mark.tsx

@@ -12,6 +12,11 @@ export const pickImagesFromMarkdown = (md: string) => {
   const res: MImageType[] = []
 
   for (const line of lines) {
+    if (!line.startsWith('!') && isRawImageUrl(line)) {
+      res.push({ url: line, name: line })
+      continue
+    }
+
     const match = regexp.exec(line)
     if (!match) {
       continue
@@ -23,3 +28,12 @@ export const pickImagesFromMarkdown = (md: string) => {
 
   return res
 }
+
+const isRawImageUrl = (url: string) => {
+  try {
+    new URL(url)
+  } catch (e) {
+    return false
+  }
+  return true
+}