diff --git a/example/color.json b/example/color.json
deleted file mode 100644
index 636b50c052..0000000000
--- a/example/color.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "color": {
-    "light": [
-      "#33A6B8",
-      "#FF6666",
-      "#26A69A",
-      "#fb7287",
-      "#69a6cc",
-      "#F11A7B",
-      "#78C1F3",
-      "#FF6666",
-      "#FF9EAA",
-      "#7ACDF6"
-    ],
-    "dark": [
-      "#F596AA",
-      "#A0A7D4",
-      "#ff7b7b",
-      "#99D8CF",
-      "#838BC6",
-      "#FFE5AD",
-      "#9BE8D8",
-      "#A1CCD1",
-      "#FFD0D0",
-      "#EAAEBA"
-    ]
-  }
-}
diff --git a/src/components/ui/markdown/customize.md b/src/components/ui/markdown/customize.md
index b7f668dd61..249e0b27be 100644
--- a/src/components/ui/markdown/customize.md
+++ b/src/components/ui/markdown/customize.md
@@ -139,6 +139,18 @@ https://github.com/toeverything/AFFiNE/blob/himself65/0710/remove-effect/apps/we
 
 https://github.com/toeverything/AFFiNE/blob/himself65/0710/remove-effect/apps/web/src/atoms/index.ts
 
+```
+https://trpc.io/docs/client/react/useInfiniteQuery
+```
+
+https://trpc.io/docs/client/react/useInfiniteQuery
+
+```
+[TRPC](https://trpc.io/docs/client/react/useInfiniteQuery)
+```
+
+[TRPC](https://trpc.io/docs/client/react/useInfiniteQuery)
+
 ## LinkCard
 
 ```
diff --git a/src/components/ui/markdown/renderers/LinkRenderer.tsx b/src/components/ui/markdown/renderers/LinkRenderer.tsx
index abfccc272e..a7eeaee5b6 100644
--- a/src/components/ui/markdown/renderers/LinkRenderer.tsx
+++ b/src/components/ui/markdown/renderers/LinkRenderer.tsx
@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react'
 import dynamic from 'next/dynamic'
+import type { PropsWithChildren } from 'react'
 
 import { GitHubBrandIcon } from '~/components/icons/platform/GitHubBrandIcon'
 import {
@@ -24,7 +25,10 @@ import { MLink } from '../../link/MLink'
 const Tweet = dynamic(() => import('~/components/widgets/shared/Tweet'), {
   ssr: false,
 })
-export const LinkRenderer = ({ href }: { href: string }) => {
+export const LinkRenderer = ({
+  href,
+  children,
+}: PropsWithChildren<{ href: string }>) => {
   const url = useMemo(() => {
     try {
       return new URL(href)
@@ -33,14 +37,17 @@ export const LinkRenderer = ({ href }: { href: string }) => {
     }
   }, [href])
 
-  if (!url) {
-    return (
+  const fallbackElement = useMemo(
+    () => (
       <p>
-        <MLink href={href}>
-          <span>{href}</span>
-        </MLink>
+        <MLink href={href}>{children ?? <span>{href}</span>}</MLink>
       </p>
-    )
+    ),
+    [children, href],
+  )
+
+  if (!url) {
+    return fallbackElement
   }
   switch (true) {
     case isTweetUrl(url): {
@@ -136,6 +143,9 @@ export const LinkRenderer = ({ href }: { href: string }) => {
     case isSelfArticleUrl(url): {
       return <LinkCard source="self" id={url.pathname.slice(1)} />
     }
+
+    default:
+      return fallbackElement
   }
 }
 
diff --git a/src/components/ui/markdown/renderers/paragraph.tsx b/src/components/ui/markdown/renderers/paragraph.tsx
index f5ca8efaee..a6a62b6cc8 100644
--- a/src/components/ui/markdown/renderers/paragraph.tsx
+++ b/src/components/ui/markdown/renderers/paragraph.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import clsx from 'clsx'
-import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react'
+import type { DetailedHTMLProps, FC, HTMLAttributes, ReactNode } from 'react'
 
 import { LinkRenderer } from './LinkRenderer'
 
@@ -19,7 +19,12 @@ export const MParagraph: FC<
 
     // isLink
     if (isLink(child)) {
-      return <LinkRenderer href={(child as any)?.props?.href} />
+      const children = (child as any)?.props?.children as ReactNode[]
+      return (
+        <LinkRenderer href={(child as any)?.props?.href}>
+          {children}
+        </LinkRenderer>
+      )
     }
   }
   // console.log(children)