Astryx Markdown与Citation组件让AI输出内容渲染得又美又可信【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryxAstryx 是一个开源、可完全定制且Agent 就绪的设计系统其中的Markdown 组件能把 AI 返回的 Markdown 字符串直接渲染成带主题样式、可流式淡入的富文本而Citation 引用组件则把来源信息变成可点击的引用芯片——两者配合让 AI 输出既好看又可信。为什么 AI 输出需要专门的渲染方案大多数 AI 应用的做法是拿到模型返回的 Markdown 字符串丢给一个通用渲染器输出原生 HTML。问题随之而来——样式和你应用的视觉语言割裂、流式输出时内容啪地一下整块出现、来源引用只有一串难看的[1]文本。Astryx 的思路不同Markdown 不是渲染成 HTML而是渲染成 Astryx 自己的组件标题、段落、列表、表格、代码块、引用块全部来自同一套设计系统主题切换、密度调整、深色模式全部自动生效。Markdown 组件AI 响应的排版引擎开箱即用的富文本支持只要传入一个字符串标题、加粗、斜体、删除线、列表、任务列表、表格、代码块、引用块、分隔线、图片都会按 Astryx 主题渲染核心实现在 Markdown.tsxdensitydefault/compact两档块级间距聊天流里用compact更紧凑headingLevelStart把#映射到你页面实际的标题层级避免 AI 输出里出现第二个 h1contentWidth/contentAlign控制正文行宽与对齐宽屏下保持可读的行长表格和代码块仍可撑满容器isStreaming开启流式模式逐块增量解析并带柔和淡入动画而不是整段闪现在 Markdown.tsx 和 streaming.ts 中实现三个让内容更活的能力自动链接autolinkgfm裸 URL、www.、email按 GitHub 风格自动变链接句末标点会被智能排除代码块内不会误伤内联插件inlinePlugins用正则把文本模式替换成任意 React 元素——issue 引用、提及、PR 编号都能一键变成可点击组件无需预处理字符串安全过滤javascript:等危险协议的链接和图片会被自动降级为纯文本AI 输出再自由也不会注入恶意内容Citation 组件给 AI 回答加可信度大模型会说胡说八道引用来源是建立信任的第一步。Citation 组件Citation.tsx提供两种内联形态label标签式带来源标题、图标/小头像和边框的芯片标题过长自动省略号截断适合需要明确上下文的内容number编号式紧凑的上标圆角徽章1、2、3…像传统脚注一样不打断阅读流有url时渲染为可点击的a新窗口打开relnoopener并附带doc-noteref无障碍角色和 aria 标签没有链接时优雅降级为纯展示。两种形态的交互示例见 Citation.stories.tsx。一个属性打通[id]自动变引用芯片真正的魔法在 Markdown 组件的sources属性传入一个以 ID 为键的来源表正文里写[abc1]或中文全角【abc1】匹配到的标记就会自动渲染成 Citation 芯片且编号按出现顺序自动分配Markdown sources{{ abc1: {title: Tokyo - Wikipedia, url: https://en.wikipedia.org/wiki/Tokyo, icon: …/favicon.ico}, def2: {title: Japan Statistics Bureau, url: …}, }} citationStylelabel {aiResponseText} /Markdown如果某个 ID 没匹配到来源标记会原样显示为普通文本不会报错——对引用可能缺失的真实场景很友好。完整的括号标记、全角标记、流式引用案例都在 MarkdownCitations.stories.tsx 里可直接对照效果。快速上手清单场景做法AI 对话流渲染Markdown isStreaming densitycompact headingLevelStart{3}回答带来源传sourcescitationStylelabel正文用[id]标记宽屏文章页contentWidth{680}控制行长contentAligncenter居中长文档导航标题自带生成 id配合 Outline 组件做目录跳转自定义外观用components覆盖 code、link、heading、citation 等任意渲染部分组件的完整属性表与最佳实践见 Markdown.doc.mjs 与 Citation.doc.mjs架构层面的说明在 docs/architecture/ 下。小结Markdown 组件AI 输出的排版引擎流式淡入、主题一致、安全过滤一应俱全Citation 组件[id]标记一行属性变引用芯片label / number 两种风格随场景切换 两者都深度融入 Astryx 主题系统换主题 内容风格整体焕新让 AI 说得又快又美还得让用户相信它——这就是 Astryx 这两个组件想解决的事。【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考