useAiWork开发者文档
核心页面构建器

Markdown 与组件演示

使用共享文档包渲染 Markdown、代码块和可信 React 演示组件。

普通 Markdown

@repo/docs 负责共享渲染,文档正文、路由与演示注册留在应用中。

  • 支持标题、列表、链接与表格。
  • 支持代码高亮、代码复制、Tabs 和提示块。
  • 支持组件预览与源码展示,不执行代码字符串。
内容维护位置
渲染能力
packages/docs
正文与演示注册
frontend/main

代码块

hello.tsx
export function Hello() {
  return <p>你好,Markdown!</p>;
}

安全边界

演示来自应用显式注册的 React 组件。源码只用于展示和复制,不使用 eval 或动态函数执行。

嵌入演示组件

点击演示按钮,再切换到源码标签查看实现。

计数器演示

可信组件保持正常交互,源码在服务端高亮。

"use client"

import { Button } from "@repo/ui/components/button"
import { useState } from "react"

export function CounterDemo() {
  const [count, setCount] = useState(0)
  return (
    <Button type="button" onClick={() => setCount((value) => value + 1)}>
      点击次数:{count}
    </Button>
  )
}

多种内容

package.json
README.md
默认 Markdown 组件与应用自定义组件可以组合使用。

本页目录