核心页面构建器
Markdown 与组件演示
使用共享文档包渲染 Markdown、代码块和可信 React 演示组件。
普通 Markdown
@repo/docs 负责共享渲染,文档正文、路由与演示注册留在应用中。
- 支持标题、列表、链接与表格。
- 支持代码高亮、代码复制、Tabs 和提示块。
- 支持组件预览与源码展示,不执行代码字符串。
代码块
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 组件与应用自定义组件可以组合使用。