[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-antfu--shiki-stream":3,"tool-antfu--shiki-stream":64},[4,17,27,35,43,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[13,14,15],"开发框架","图像","Agent","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":23,"last_commit_at":24,"category_tags":25,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",138956,2,"2026-04-05T11:33:21",[13,15,26],"语言模型",{"id":28,"name":29,"github_repo":30,"description_zh":31,"stars":32,"difficulty_score":23,"last_commit_at":33,"category_tags":34,"status":16},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[13,14,15],{"id":36,"name":37,"github_repo":38,"description_zh":39,"stars":40,"difficulty_score":23,"last_commit_at":41,"category_tags":42,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,26],{"id":44,"name":45,"github_repo":46,"description_zh":47,"stars":48,"difficulty_score":23,"last_commit_at":49,"category_tags":50,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[14,51,52,53,15,54,26,13,55],"数据工具","视频","插件","其他","音频",{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":10,"last_commit_at":62,"category_tags":63,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[15,14,13,26,54],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":79,"owner_location":80,"owner_email":81,"owner_twitter":82,"owner_website":83,"owner_url":84,"languages":85,"stars":102,"forks":103,"last_commit_at":104,"license":105,"difficulty_score":23,"env_os":106,"env_gpu":106,"env_ram":106,"env_deps":107,"category_tags":111,"github_topics":112,"view_count":10,"oss_zip_url":82,"oss_zip_packed_at":82,"status":16,"created_at":116,"updated_at":117,"faqs":118,"releases":129},678,"antfu\u002Fshiki-stream","shiki-stream","Streaming highlighting with Shiki. Useful for highlighting text streams like LLM outputs.","shiki-stream 是一个基于 Shiki 引擎的流式代码高亮库，专为实时处理文本流而生。它最大的价值在于能让代码在生成的瞬间就被高亮显示，而不是等待整个代码块传输完成。这对于展示大语言模型（LLM）输出或实时日志等场景至关重要，显著提升了用户的阅读体验。\n\nshiki-stream 非常适合前端开发者、AI 应用构建者以及需要动态渲染代码界面的技术人员。它通过 `CodeToTokenTransformStream` 将普通文本流转换为带有样式信息的 Token 流，并引入了一种特殊的“召回”机制。当代码上下文变化导致高亮结果改变时，它能通知接收端修正之前的显示，从而保证最终呈现的准确性。此外，shiki-stream 还提供了开箱即用的 Vue 和 React 组件，开发者只需传入流数据即可快速实现流式高亮效果。无论是自定义流处理还是直接使用框架组件，shiki-stream 都能提供灵活、高效且准确的解决方案，是构建现代 AI 交互界面的得力助手。","# shiki-stream\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![bundle][bundle-src]][bundle-href]\n[![JSDocs][jsdocs-src]][jsdocs-href]\n[![License][license-src]][license-href]\n\nStreaming highlighting with Shiki. Useful for highlighting text streams like LLM outputs.\n\n[Live Demo](https:\u002F\u002Fshiki-stream.netlify.app\u002F)\n\n## Usage\n\nCreate a transform stream with `CodeToTokenTransformStream` and `.pipeThrough` your text stream:\n\n```ts\nimport { createHighlighter, createJavaScriptRegexEngine } from 'shiki'\nimport { CodeToTokenTransformStream } from 'shiki-stream'\n\n\u002F\u002F Initialize the Shiki highlighter somewhere in your app\nconst highlighter = await createHighlighter({\n  langs: [\u002F* ... *\u002F],\n  themes: [\u002F* ... *\u002F],\n  engine: createJavaScriptRegexEngine()\n})\n\n\u002F\u002F The ReadableStream\u003Cstring> you want to highlight\nconst textStream = getTextStreamFromSomewhere()\n\n\u002F\u002F Pipe the text stream through the token stream\nconst tokensStream = textStream\n  .pipeThrough(new CodeToTokenTransformStream({\n    highlighter,\n    lang: 'javascript',\n    theme: 'nord',\n    allowRecalls: true, \u002F\u002F see explanation below\n  }))\n```\n\n#### `allowRecalls`\n\nDue fact that the highlighting might be changed based on the context of the code, the themed tokens might be changed as the stream goes on. Because the streams are one-directional, we introduce a special \"recall\" token to notify the receiver to discard the last tokens that has changed.\n\nBy default, `CodeToTokenTransformStream` only returns stable tokens, no recalls. This also means the tokens are outputted less fine-grained, usually line-by-line.\n\nFor stream consumers that can handle recalls (e.g. our Vue \u002F React components), you can set `allowRecalls: true` to get more fine-grained tokens.\n\nTypically, recalls should be handled like:\n\n```ts\nconst receivedTokens: ThemedToken[] = []\n\ntokensStream.pipeTo(new WritableStream({\n  async write(token) {\n    if ('recall' in token) {\n      \u002F\u002F discard the last `token.recall` tokens\n      receivedTokens.length -= token.recall\n    }\n    else {\n      receivedTokens.push(token)\n    }\n  }\n}))\n```\n\n### Consume the Token Stream\n\n#### Manually\n\n```ts\ntokensStream.pipeTo(new WritableStream({\n  async write(token) {\n    console.log(token)\n  }\n}))\n```\n\nOr in Node.js\n\n```ts\nfor await (const token of tokensStream) {\n  console.log(token)\n}\n```\n\n#### Vue\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ShikiStreamRenderer } from 'shiki-stream\u002Fvue'\n\n\u002F\u002F get the token stream\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CShikiStreamRenderer :stream=\"tokensStream\" \u002F>\n\u003C\u002Ftemplate>\n```\n\n#### React\n\n```tsx\nimport { ShikiStreamRenderer } from 'shiki-stream\u002Freact'\n\nexport function MyComponent() {\n  \u002F\u002F get the token stream\n  return \u003CShikiStreamRenderer stream={tokensStream} \u002F>\n}\n```\n\n## Cached Renderer\n\nThis library also provides a simpfiled renderer API to render incrementally updated code string.\n\n> [!NOTE]\n> Experimental\n\n### Vue\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ShikiCachedRenderer } from 'shiki-stream\u002Fvue'\n\nconst highlighter = await createHighlighter({\n  langs: [\u002F* ... *\u002F],\n  themes: [\u002F* ... *\u002F],\n  engine: createJavaScriptRegexEngine()\n})\n\nconst code = ref('') \u002F\u002F code should only be updated incrementally\n\n\u002F\u002F for demo purposes\nonMounted(() => {\n  setInterval(() => {\n    code.value += '\\nconsole.log(\"Hello, world!\");'\n  }, 1000)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CShikiCachedRenderer\n    :highlighter=\"highlighter\"\n    :code=\"code\"\n    lang=\"js\"\n    theme=\"vitesse-light\"\n  \u002F>\n\u003C\u002Ftemplate>\n```\n\n### React\n\nTODO:\n\n## Sponsors\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fantfu\u002Fstatic\u002Fsponsors.svg\">\n    \u003Cimg src='https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fantfu\u002Fstatic\u002Fsponsors.svg'\u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n## License\n\n[MIT](.\u002FLICENSE) License © [Anthony Fu](https:\u002F\u002Fgithub.com\u002Fantfu)\n\n\u003C!-- Badges -->\n\n[npm-version-src]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fshiki-stream?style=flat&colorA=080f12&colorB=1fa669\n[npm-version-href]: https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fshiki-stream\n[npm-downloads-src]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fshiki-stream?style=flat&colorA=080f12&colorB=1fa669\n[npm-downloads-href]: https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fshiki-stream\n[bundle-src]: https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Fshiki-stream?style=flat&colorA=080f12&colorB=1fa669&label=minzip\n[bundle-href]: https:\u002F\u002Fbundlephobia.com\u002Fresult?p=shiki-stream\n[license-src]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fantfu\u002Fshiki-stream.svg?style=flat&colorA=080f12&colorB=1fa669\n[license-href]: https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fblob\u002Fmain\u002FLICENSE\n[jsdocs-src]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fjsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669\n[jsdocs-href]: https:\u002F\u002Fwww.jsdocs.io\u002Fpackage\u002Fshiki-stream\n","\u003C\u002Fthink>\n\n# shiki-stream\n\n[![npm 版本][npm-version-src]][npm-version-href]\n[![npm 下载量][npm-downloads-src]][npm-downloads-href]\n[![打包体积][bundle-src]][bundle-href]\n[![JSDocs 文档][jsdocs-src]][jsdocs-href]\n[![许可证][license-src]][license-href]\n\n使用 Shiki 进行流式高亮。适用于高亮文本流，例如大语言模型（LLM）的输出。\n\n[在线演示](https:\u002F\u002Fshiki-stream.netlify.app\u002F)\n\n## 用法\n\n使用 `CodeToTokenTransformStream` 创建一个转换流，并通过 `.pipeThrough` 处理你的文本流：\n\n```ts\nimport { createHighlighter, createJavaScriptRegexEngine } from 'shiki'\nimport { CodeToTokenTransformStream } from 'shiki-stream'\n\n\u002F\u002F Initialize the Shiki highlighter somewhere in your app\nconst highlighter = await createHighlighter({\n  langs: [\u002F* ... *\u002F],\n  themes: [\u002F* ... *\u002F],\n  engine: createJavaScriptRegexEngine()\n})\n\n\u002F\u002F The ReadableStream\u003Cstring> you want to highlight\nconst textStream = getTextStreamFromSomewhere()\n\n\u002F\u002F Pipe the text stream through the token stream\nconst tokensStream = textStream\n  .pipeThrough(new CodeToTokenTransformStream({\n    highlighter,\n    lang: 'javascript',\n    theme: 'nord',\n    allowRecalls: true, \u002F\u002F see explanation below\n  }))\n```\n\n#### allowRecalls\n\n由于高亮可能会根据代码上下文而改变，随着流的进行，主题化的 token 也可能发生变化。因为流是单向的，我们引入了一个特殊的“回溯”token 来通知接收者丢弃最后发生变化的那些 token。\n\n默认情况下，`CodeToTokenTransformStream` 仅返回稳定的 token，没有回溯。这也意味着 token 的输出粒度较粗，通常是按行输出。\n\n对于能够处理回溯的流消费者（例如我们的 Vue \u002F React 组件），你可以设置 `allowRecalls: true` 以获得更细粒度的 token。\n\n通常，回溯应按如下方式处理：\n\n```ts\nconst receivedTokens: ThemedToken[] = []\n\ntokensStream.pipeTo(new WritableStream({\n  async write(token) {\n    if ('recall' in token) {\n      \u002F\u002F discard the last `token.recall` tokens\n      receivedTokens.length -= token.recall\n    }\n    else {\n      receivedTokens.push(token)\n    }\n  }\n}))\n```\n\n### 消费 Token 流\n\n#### 手动\n\n```ts\ntokensStream.pipeTo(new WritableStream({\n  async write(token) {\n    console.log(token)\n  }\n}))\n```\n\n或者在 Node.js 中\n\n```ts\nfor await (const token of tokensStream) {\n  console.log(token)\n}\n```\n\n#### Vue\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ShikiStreamRenderer } from 'shiki-stream\u002Fvue'\n\n\u002F\u002F get the token stream\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CShikiStreamRenderer :stream=\"tokensStream\" \u002F>\n\u003C\u002Ftemplate>\n```\n\n#### React\n\n```tsx\nimport { ShikiStreamRenderer } from 'shiki-stream\u002Freact'\n\nexport function MyComponent() {\n  \u002F\u002F get the token stream\n  return \u003CShikiStreamRenderer stream={tokensStream} \u002F>\n}\n```\n\n## 缓存渲染器\n\n本库还提供了一个简化的渲染器 API，用于渲染增量更新的代码字符串。\n\n> [!NOTE]\n> 实验性\n\n### Vue\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ShikiCachedRenderer } from 'shiki-stream\u002Fvue'\n\nconst highlighter = await createHighlighter({\n  langs: [\u002F* ... *\u002F],\n  themes: [\u002F* ... *\u002F],\n  engine: createJavaScriptRegexEngine()\n})\n\nconst code = ref('') \u002F\u002F code should only be updated incrementally\n\n\u002F\u002F for demo purposes\nonMounted(() => {\n  setInterval(() => {\n    code.value += '\\nconsole.log(\"Hello, world!\");'\n  }, 1000)\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CShikiCachedRenderer\n    :highlighter=\"highlighter\"\n    :code=\"code\"\n    lang=\"js\"\n    theme=\"vitesse-light\"\n  \u002F>\n\u003C\u002Ftemplate>\n```\n\n### React\n\n待办事项：\n\n## 赞助商\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fantfu\u002Fstatic\u002Fsponsors.svg\">\n    \u003Cimg src='https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Fantfu\u002Fstatic\u002Fsponsors.svg'\u002F>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n## 许可证\n\n[MIT](.\u002FLICENSE) 许可证 © [Anthony Fu](https:\u002F\u002Fgithub.com\u002Fantfu)\n\n\u003C!-- 徽章 -->\n\n[npm-version-src]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fshiki-stream?style=flat&colorA=080f12&colorB=1fa669\n[npm-version-href]: https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fshiki-stream\n[npm-downloads-src]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fshiki-stream?style=flat&colorA=080f12&colorB=1fa669\n[npm-downloads-href]: https:\u002F\u002Fnpmjs.com\u002Fpackage\u002Fshiki-stream\n[bundle-src]: https:\u002F\u002Fimg.shields.io\u002Fbundlephobia\u002Fminzip\u002Fshiki-stream?style=flat&colorA=080f12&colorB=1fa669&label=minzip\n[bundle-href]: https:\u002F\u002Fbundlephobia.com\u002Fresult?p=shiki-stream\n[license-src]: https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fantfu\u002Fshiki-stream.svg?style=flat&colorA=080f12&colorB=1fa669\n[license-href]: https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fblob\u002Fmain\u002FLICENSE\n[jsdocs-src]: https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fjsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669\n[jsdocs-href]: https:\u002F\u002Fwww.jsdocs.io\u002Fpackage\u002Fshiki-stream","# shiki-stream 快速上手指南\n\n`shiki-stream` 是一个基于 Shiki 的流式语法高亮工具，专为 LLM 输出等文本流设计，支持实时增量渲染。\n\n## 环境准备\n\n- **运行环境**：Node.js (v14+)\n- **开发语言**：TypeScript (推荐)\n- **前置依赖**：无特殊系统要求，需安装 `shiki` 作为高亮引擎\n\n## 安装步骤\n\n由于国内网络限制，建议配置 npm 镜像源以加速下载：\n\n```bash\nnpm config set registry https:\u002F\u002Fregistry.npmmirror.com\n```\n\n安装 `shiki-stream` 及其依赖 `shiki`：\n\n```bash\nnpm install shiki-stream shiki\n```\n\n## 基本使用\n\n### 1. 初始化与流处理\n\n首先初始化 Shiki 高亮器，并通过 `pipeThrough` 将文本流转换为 Token 流：\n\n```ts\nimport { createHighlighter, createJavaScriptRegexEngine } from 'shiki'\nimport { CodeToTokenTransformStream } from 'shiki-stream'\n\n\u002F\u002F 初始化 Shiki 高亮器\nconst highlighter = await createHighlighter({\n  langs: [\u002F* ... *\u002F],\n  themes: [\u002F* ... *\u002F],\n  engine: createJavaScriptRegexEngine()\n})\n\n\u002F\u002F 获取你的文本流\nconst textStream = getTextStreamFromSomewhere()\n\n\u002F\u002F 管道传输进行 Token 化\nconst tokensStream = textStream\n  .pipeThrough(new CodeToTokenTransformStream({\n    highlighter,\n    lang: 'javascript',\n    theme: 'nord',\n    allowRecalls: true, \u002F\u002F 开启后支持更细粒度的上下文召回\n  }))\n```\n\n### 2. 消费 Token 流\n\n#### 手动消费\n\n```ts\ntokensStream.pipeTo(new WritableStream({\n  async write(token) {\n    console.log(token)\n  }\n}))\n```\n\n或在 Node.js 环境中：\n\n```ts\nfor await (const token of tokensStream) {\n  console.log(token)\n}\n```\n\n#### 框架集成\n\n库提供了现成的 Vue 和 React 组件，可直接渲染流数据。\n\n**Vue 示例：**\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { ShikiStreamRenderer } from 'shiki-stream\u002Fvue'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CShikiStreamRenderer :stream=\"tokensStream\" \u002F>\n\u003C\u002Ftemplate>\n```\n\n**React 示例：**\n\n```tsx\nimport { ShikiStreamRenderer } from 'shiki-stream\u002Freact'\n\nexport function MyComponent() {\n  return \u003CShikiStreamRenderer stream={tokensStream} \u002F>\n}\n```","某前端团队正在构建基于大模型的智能编程助手，用户期望在对话中实时看到生成的代码片段并带有语法高亮。\n\n### 没有 shiki-stream 时\n- 传统方案需等待代码完整返回后再渲染，导致用户面对长时间空白或纯文本，交互延迟感强。\n- 自行实现流式高亮逻辑复杂，随着代码片段增长，早期生成的 token 可能因后续上下文而变色，难以同步更新。\n- 在 React 或 Vue 项目中需重复编写 Stream 转换与 DOM 操作代码，增加了不必要的工程负担。\n\n### 使用 shiki-stream 后\n- shiki-stream 通过 TransformStream 无缝对接文本流，代码每生成一个字符即可立即上色，视觉反馈零延迟。\n- 利用其特有的 recall 机制，当上下文变化影响高亮时自动回滚旧 token，确保最终展示效果准确无误。\n- 内置 ShikiCachedRenderer 及框架组件，开发者只需传入流对象，即可在 UI 中实现平滑的增量渲染。\n\nshiki-stream 让 AI 代码生成过程从枯燥的文字流转变为即时的、专业的可视化编程体验。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fantfu_shiki-stream_658f289d.png","antfu","Anthony Fu","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fantfu_c3af2959.jpg","A ship in harbor is safe, but that is not what ships are built for.","@vercel team @nuxt","undefined","hi@antfu.me",null,"https:\u002F\u002Fantfu.me","https:\u002F\u002Fgithub.com\u002Fantfu",[86,90,94,98],{"name":87,"color":88,"percentage":89},"TypeScript","#3178c6",45.5,{"name":91,"color":92,"percentage":93},"HTML","#e34c26",37.2,{"name":95,"color":96,"percentage":97},"Vue","#41b883",17,{"name":99,"color":100,"percentage":101},"JavaScript","#f1e05a",0.3,586,11,"2026-04-03T20:10:06","MIT","未说明",{"notes":108,"python":106,"dependencies":109},"这是一个基于 Node.js 和 TypeScript 的流式代码高亮工具，主要用于处理 LLM 输出等文本流。核心依赖 shiki 库，使用 JavaScript 正则引擎，无需 GPU 加速。支持 Vue 和 React 组件集成，兼容 Web Streams API。",[110],"shiki",[26,13],[113,114,115],"llm","stream","syntax-highlighting","2026-03-27T02:49:30.150509","2026-04-06T07:13:14.271300",[119,124],{"id":120,"question_zh":121,"answer_zh":122,"source_url":123},2823,"使用 shiki-stream 处理 JSX 流式输出时报错 \"Language jsx not found\" 怎么办？","该错误提示表明可能需要预先加载语言包。维护者指出由于提供的信息不足以判断是库的 Bug 还是用户配置问题，因此暂时关闭了 Issue。建议检查代码中是否正确加载了所需的语言（如 jsx），并提供最小可复现示例（minimal reproduction）以便进一步排查。","https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fissues\u002F2",{"id":125,"question_zh":126,"answer_zh":127,"source_url":128},2824,"Vue 组件中流式处理 JSON 时出现渲染错误或状态不一致是什么原因？","这通常是由于 `watch` 钩子中存在竞态条件（race condition）导致的。当输入流（stream）发生变化时，旧的流可能仍在运行，导致数据混乱。建议在 `watch` 监听器中增加清理逻辑：在流更新时停止上一个流，重置 tokens 数组长度，并确保只在新的流开始时触发事件，避免旧数据干扰新流。","https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fissues\u002F3",[130,135,140,145,150,155],{"id":131,"version":132,"summary_zh":133,"released_at":134},102286,"v0.1.4","###    🚀 Features\n\n- `solid-js` renderer  -  by @o-az in https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fissues\u002F5 [\u003Csamp>(589c0)\u003C\u002Fsamp>](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcommit\u002F589c0d3)\n\n#####     [View changes on GitHub](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcompare\u002Fv0.1.3...v0.1.4)","2026-01-06T08:05:41",{"id":136,"version":137,"summary_zh":138,"released_at":139},102287,"v0.1.3","###    🐞 Bug Fixes\n\n- **vue**: Stream race condition error  -  by @mahoushoujoarale and **zhaojie09** in https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fissues\u002F4 [\u003Csamp>(02f01)\u003C\u002Fsamp>](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcommit\u002F02f0117)\n\n#####     [View changes on GitHub](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcompare\u002Fv0.1.2...v0.1.3)","2025-11-05T07:12:58",{"id":141,"version":142,"summary_zh":143,"released_at":144},102288,"v0.1.2","###    🚀 Features\n\n- Add `ShikiCachedRenderer` for Vue  -  by @antfu [\u003Csamp>(b1076)\u003C\u002Fsamp>](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcommit\u002Fb10767c)\n\n###    🐞 Bug Fixes\n\n- React callback usage  -  by @kongmoumou in https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fissues\u002F1 [\u003Csamp>(a3591)\u003C\u002Fsamp>](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcommit\u002Fa3591cd)\n\n#####     [View changes on GitHub](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcompare\u002Fv0.1.1...v0.1.2)","2025-04-02T12:08:11",{"id":146,"version":147,"summary_zh":148,"released_at":149},102289,"v0.1.1","###    🚀 Features\n\n- Support shiki v3  -  by @antfu [\u003Csamp>(046cd)\u003C\u002Fsamp>](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcommit\u002F046cd99)\n\n#####     [View changes on GitHub](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcompare\u002Fv0.1.0...v0.1.1)","2025-02-18T11:18:34",{"id":151,"version":152,"summary_zh":153,"released_at":154},102290,"v0.1.0","###    🚨 Breaking Changes\n\n- Rename some internal APIs, stabilize public API  -  by @antfu [\u003Csamp>(f95cd)\u003C\u002Fsamp>](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcommit\u002Ff95cdf0)\n\n###    🚀 Features\n\n- Playground  -  by @antfu [\u003Csamp>(a2fa2)\u003C\u002Fsamp>](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcommit\u002Fa2fa272)\n- Expose tokenizer on TransformStream  -  by @antfu [\u003Csamp>(9500b)\u003C\u002Fsamp>](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcommit\u002F9500bd3)\n\n#####     [View changes on GitHub](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcompare\u002Fv0.0.1...v0.1.0)","2025-02-18T05:44:29",{"id":156,"version":157,"summary_zh":158,"released_at":159},102291,"v0.0.1","###    🚀 Features\n\n- Add react component  -  by @antfu [\u003Csamp>(0fffd)\u003C\u002Fsamp>](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcommit\u002F0fffd0b)\n\n#####     [View changes on GitHub](https:\u002F\u002Fgithub.com\u002Fantfu\u002Fshiki-stream\u002Fcompare\u002F0a73195a70838ab5eb7c24b63a6934481d25ac74...v0.0.1)","2025-02-17T10:48:08"]