Now vibe coding, so learning hammer FE ?
《TanStack_Markdown与TanStack_Highlight发布：让技术文档渲染回归轻量》
标签：#前端 #TanStack #Markdown渲染 #语法高亮 #性能优化 #React #TypeScript
总结：
TanStack发布两个新库：Markdown解析器与Highlight语法高亮，专为技术博客、文档和AI流式输出设计。通过将Markdown解析与语法高亮解耦，采用轻量级AST和语义化CSS类，将文档页脚本体积从1.1MiB大幅缩减至约27KiB，彻底摆脱了对React_Server_Components的依赖，实现了"让内容回归内容"的极简渲染理念。
文章要点：
1. 痛点很真实：原来tanstack.com的文档页光是语法高亮就占了358KiB，加上Shiki、WASM、主题等，读个页面像下载小型出版系统，不得不靠RSC把负担藏到服务器端
2. 两个库分工明确：Markdown负责把内容解析成可序列化的普通数据树，Highlight负责把已知语言转成带语义CSS类的HTML，互不依赖，按需组合
3. 体积真的小：Markdown解析器仅4.9KB(gzipped)，HTML渲染器约6.7KB，Highlight核心才1.7KB，25种语言全包也才8KB，零运行时依赖
4. 暗色模式超优雅：Highlight输出一套带th-语义类的HTML，主题通过CSS变量切换，不用重新高亮，明暗切换只是一次CSS操作
5. AI流式输出有新招：不用维护复杂的增量解析状态，每次收到新文本就同步重新解析，已完成块保持稳定，未完成的标题列表不会留空占位
6. 已经扛住实战考验：这两个库已全面替换tanstack.com的文档和博客渲染，测试覆盖333个真实文档fixtures，不是玩具是生产力工具
URL：https://tanstack.com/blog/introducing-tanstack-markdown-and-highlight
标签：#前端 #TanStack #Markdown渲染 #语法高亮 #性能优化 #React #TypeScript
总结：
TanStack发布两个新库：Markdown解析器与Highlight语法高亮，专为技术博客、文档和AI流式输出设计。通过将Markdown解析与语法高亮解耦，采用轻量级AST和语义化CSS类，将文档页脚本体积从1.1MiB大幅缩减至约27KiB，彻底摆脱了对React_Server_Components的依赖，实现了"让内容回归内容"的极简渲染理念。
文章要点：
1. 痛点很真实：原来tanstack.com的文档页光是语法高亮就占了358KiB，加上Shiki、WASM、主题等，读个页面像下载小型出版系统，不得不靠RSC把负担藏到服务器端
2. 两个库分工明确：Markdown负责把内容解析成可序列化的普通数据树，Highlight负责把已知语言转成带语义CSS类的HTML，互不依赖，按需组合
3. 体积真的小：Markdown解析器仅4.9KB(gzipped)，HTML渲染器约6.7KB，Highlight核心才1.7KB，25种语言全包也才8KB，零运行时依赖
4. 暗色模式超优雅：Highlight输出一套带th-语义类的HTML，主题通过CSS变量切换，不用重新高亮，明暗切换只是一次CSS操作
5. AI流式输出有新招：不用维护复杂的增量解析状态，每次收到新文本就同步重新解析，已完成块保持稳定，未完成的标题列表不会留空占位
6. 已经扛住实战考验：这两个库已全面替换tanstack.com的文档和博客渲染，测试覆盖333个真实文档fixtures，不是玩具是生产力工具
URL：https://tanstack.com/blog/introducing-tanstack-markdown-and-highlight
TanStack
Introducing TanStack Markdown and TanStack Highlight | TanStack Blog
TanStack Markdown and TanStack Highlight are two tiny, synchronous libraries for turning technical content into deterministic, themeable webpages without shipping a general-purpose publishing system.
《shadcn/typeset 发布：为HTML内容打造统一排版系统》
标签：#前端 #shadcn #CSS排版 #Markdown渲染 #流式内容
总结：
shadcn/typeset 是一个面向 HTML 和 Markdown 的轻量排版系统，只需一个 CSS 文件和一个
文章要点：
1. 开箱即用：只需在容器上添加
2. 三旋钮控制：通过
3. 流式友好：设计上避免了新内容块插入时导致已有内容样式重排的问题，非常适合 AI 聊天、流式输出等实时渲染场景
4. 完全可控：文件直接存在于你的项目中，无额外依赖包或配置层，真正做到了"你拥有它"
URL：https://ui.shadcn.com/docs/changelog/2026-07-typeset
标签：#前端 #shadcn #CSS排版 #Markdown渲染 #流式内容
总结：
shadcn/typeset 是一个面向 HTML 和 Markdown 的轻量排版系统，只需一个 CSS 文件和一个
typeset 类，即可为博客、文档、聊天流等场景提供统一且可灵活调节的文本样式，专为流式输出场景优化。文章要点：
1. 开箱即用：只需在容器上添加
typeset 类，内部所有 HTML 元素（标题、段落、列表、表格、代码块等）自动获得优雅排版2. 三旋钮控制：通过
--typeset-size（字号）、--typeset-leading（行高）、--typeset-flow（间距）三个 CSS 变量，轻松为不同场景（聊天、文档、博客）定制专属节奏3. 流式友好：设计上避免了新内容块插入时导致已有内容样式重排的问题，非常适合 AI 聊天、流式输出等实时渲染场景
4. 完全可控：文件直接存在于你的项目中，无额外依赖包或配置层，真正做到了"你拥有它"
URL：https://ui.shadcn.com/docs/changelog/2026-07-typeset
Shadcn
July 2026 - Introducing shadcn/typeset
A complete typography system for HTML, from blog posts to streaming chat. One CSS file you own.
《用TanStack_Start构建博客（上篇）》
标签：#前端 #TanStack_Start #TanStack_Router #Server_Functions #静态预渲染 #Markdown博客 #代码高亮
总结：
本文通过实战案例演示如何使用 TanStack Start 框架构建一个 Markdown 博客系统。文章重点介绍了 Server Functions 解决同构加载器无法访问文件系统的问题、动态路由参数处理、以及使用 markdown-it 和 Shiki 实现带行号的高亮代码块，为开发者提供了完整的技术实现路径。
文章要点：
- TanStack Start 是基于 TanStack Router 的轻量级服务端框架，支持 SSR、API 端点和 Server Functions
- 使用
- Server Functions 是同构应用的关键——无论 loader 在服务端还是客户端运行，都能保证文件读取逻辑始终在服务端执行
- 动态路由通过
- 使用 markdown-it + Shiki 实现代码高亮，通过自定义 transformer 支持
- 文章预告下篇将介绍静态生成和部署策略
文章URL：https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/
标签：#前端 #TanStack_Start #TanStack_Router #Server_Functions #静态预渲染 #Markdown博客 #代码高亮
总结：
本文通过实战案例演示如何使用 TanStack Start 框架构建一个 Markdown 博客系统。文章重点介绍了 Server Functions 解决同构加载器无法访问文件系统的问题、动态路由参数处理、以及使用 markdown-it 和 Shiki 实现带行号的高亮代码块，为开发者提供了完整的技术实现路径。
文章要点：
- TanStack Start 是基于 TanStack Router 的轻量级服务端框架，支持 SSR、API 端点和 Server Functions
- 使用
import.meta.glob 动态扫描 Markdown 文件，配合 gray-matter 解析文章元数据- Server Functions 是同构应用的关键——无论 loader 在服务端还是客户端运行，都能保证文件读取逻辑始终在服务端执行
- 动态路由通过
$slug.tsx 文件命名实现，配合 createFileRoute 和 head 函数设置页面标题- 使用 markdown-it + Shiki 实现代码高亮，通过自定义 transformer 支持
line-numbers 语法标记，结合 CSS counter 渲染行号- 文章预告下篇将介绍静态生成和部署策略
文章URL：https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/
Frontend Masters
Building a Blog in TanStack (Part 1 of 2)
TanStack Start is one of the newest web frameworks, and its popularity is rising quickly. Start is a thin server-side layer that sits atop TanStack Router and provides features like server functions, API endpoints, and server-side rendering. I wrote a three…
