Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/687https://channel.meo-ai.com/posts/687Sat, 01 Aug 2026 09:15:00 GMT<span class="post-title-source">《TanStack_Markdown与TanStack_Highlight发布：让技术文档渲染回归轻量》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23TanStack" title="#TanStack">#TanStack</a> <a href="/search/result?q=%23Markdown%E6%B8%B2%E6%9F%93" title="#Markdown渲染">#Markdown渲染</a> <a href="/search/result?q=%23%E8%AF%AD%E6%B3%95%E9%AB%98%E4%BA%AE" title="#语法高亮">#语法高亮</a> <a href="/search/result?q=%23%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" title="#性能优化">#性能优化</a> <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23TypeScript" title="#TypeScript">#TypeScript</a><br /><br />总结：<br />TanStack发布两个新库：Markdown解析器与Highlight语法高亮，专为技术博客、文档和AI流式输出设计。通过将Markdown解析与语法高亮解耦，采用轻量级AST和语义化CSS类，将文档页脚本体积从1.1MiB大幅缩减至约27KiB，彻底摆脱了对React_Server_Components的依赖，实现了"让内容回归内容"的极简渲染理念。<br /><br />文章要点：<br />1. 痛点很真实：原来tanstack.com的文档页光是语法高亮就占了358KiB，加上Shiki、WASM、主题等，读个页面像下载小型出版系统，不得不靠RSC把负担藏到服务器端<br />2. 两个库分工明确：Markdown负责把内容解析成可序列化的普通数据树，Highlight负责把已知语言转成带语义CSS类的HTML，互不依赖，按需组合<br />3. 体积真的小：Markdown解析器仅4.9KB(gzipped)，HTML渲染器约6.7KB，Highlight核心才1.7KB，25种语言全包也才8KB，零运行时依赖<br />4. 暗色模式超优雅：Highlight输出一套带th-语义类的HTML，主题通过CSS变量切换，不用重新高亮，明暗切换只是一次CSS操作<br />5. AI流式输出有新招：不用维护复杂的增量解析状态，每次收到新文本就同步重新解析，已完成块保持稳定，未完成的标题列表不会留空占位<br />6. 已经扛住实战考验：这两个库已全面替换tanstack.com的文档和博客渲染，测试覆盖333个真实文档fixtures，不是玩具是生产力工具<br /><br />URL：<a href="https://tanstack.com/blog/introducing-tanstack-markdown-and-highlight" target="_blank" rel="noopener" title="https://tanstack.com/blog/introducing-tanstack-markdown-and-highlight">https://tanstack.com/blog/introducing-tanstack-markdown-and-highlight</a><a class="tgme_widget_message_link_preview" href="https://tanstack.com/blog/introducing-tanstack-markdown-and-highlight" target="_blank" rel="noopener" title="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."> <div class="link_preview_site_name accent_color">TanStack</div> <img class="link_preview_image" alt="Introducing TanStack Markdown and TanStack Highlight | TanStack Blog" src="/static/https://cdn4.telesco.pe/file/UGIat6DB6OtQorR_7WxHpJzzGnXMNP4Rt2qGKjT9anm6BXOifi8Kcva8lwvQ2Dced1laZFWF15tbUvWBgejyUyV762v6DYd428J6Tg5LBshWtiXceQa_sw4UqS9RdZJrxIz59BApdziCXiiXNPZIRXBjCGq7c3ozUky2kdDt14UdfHQuz9ArvM5in554bxhhiovljoAQQS3Aj0Vbrd-LnPbHUrBLp6cAOAz4sB3vCtCRKUfji_c2ftLHQJ1O1_rDKIKNV4eRT5EKPqzHRRhhPaIJDDWqw3JH87UVTIf2Bv5sAi0qv2Wo4rHlk0Da2A23egGUApiNn4C6eQAnvoKIWg.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Introducing TanStack Markdown and TanStack Highlight | TanStack Blog</div> <div class="link_preview_description">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.</div> </a>https://channel.meo-ai.com/posts/679https://channel.meo-ai.com/posts/679Sun, 19 Jul 2026 14:08:25 GMT<span class="post-title-source">《shadcn/typeset 发布：为HTML内容打造统一排版系统》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23shadcn" title="#shadcn">#shadcn</a> <a href="/search/result?q=%23CSS%E6%8E%92%E7%89%88" title="#CSS排版">#CSS排版</a> <a href="/search/result?q=%23Markdown%E6%B8%B2%E6%9F%93" title="#Markdown渲染">#Markdown渲染</a> <a href="/search/result?q=%23%E6%B5%81%E5%BC%8F%E5%86%85%E5%AE%B9" title="#流式内容">#流式内容</a><br /><br />总结：<br />shadcn/typeset 是一个面向 HTML 和 Markdown 的轻量排版系统，只需一个 CSS 文件和一个 <code>typeset</code> 类，即可为博客、文档、聊天流等场景提供统一且可灵活调节的文本样式，专为流式输出场景优化。<br /><br />文章要点：<br />1. 开箱即用：只需在容器上添加 <code>typeset</code> 类，内部所有 HTML 元素（标题、段落、列表、表格、代码块等）自动获得优雅排版<br />2. 三旋钮控制：通过 <code>--typeset-size</code>（字号）、<code>--typeset-leading</code>（行高）、<code>--typeset-flow</code>（间距）三个 CSS 变量，轻松为不同场景（聊天、文档、博客）定制专属节奏<br />3. 流式友好：设计上避免了新内容块插入时导致已有内容样式重排的问题，非常适合 AI 聊天、流式输出等实时渲染场景<br />4. 完全可控：文件直接存在于你的项目中，无额外依赖包或配置层，真正做到了"你拥有它"<br /><br />URL：<a href="https://ui.shadcn.com/docs/changelog/2026-07-typeset" target="_blank" rel="noopener" title="https://ui.shadcn.com/docs/changelog/2026-07-typeset">https://ui.shadcn.com/docs/changelog/2026-07-typeset</a><a class="tgme_widget_message_link_preview" href="https://ui.shadcn.com/docs/changelog/2026-07-typeset" target="_blank" rel="noopener" title="A complete typography system for HTML, from blog posts to streaming chat. One CSS file you own."> <div class="link_preview_site_name accent_color">Shadcn</div> <img class="link_preview_image" alt="July 2026 - Introducing shadcn/typeset" src="/static/https://cdn4.telesco.pe/file/P3vpd47EB-LfgY7nz8oty8yeu0zqOTJIPYScgmHMUBLtXJyqXQMChAUbcBeXvGnSWfZ5qHCm0cMQ3W-5nM0h_Gt8kVoNVWopDO9XUNW_RYIF1Cg_H_nYt0Sz26qseWNZJ8VoycwR0DpZXjHWcSzQBHTg-Yqz723iZ34FVoXla7Xq6Ztr-TXhgq31SPkSf0Wkr5y7omcm265hrj1jUBL4xPq94gCoJMUO-DS0pt-rEdD9lKA7BPI5jhvKciicSvYoeDcqYwi1dy_1er0cUDmh8wBvChyyivPOIR6puWyDw69VOkpfM4W0UrPhVPoQIR55ykctK8FV9U4xXM0qBcwCRw.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">July 2026 - Introducing shadcn/typeset</div> <div class="link_preview_description">A complete typography system for HTML, from blog posts to streaming chat. One CSS file you own.</div> </a>https://channel.meo-ai.com/posts/601https://channel.meo-ai.com/posts/601Sat, 18 Apr 2026 08:38:00 GMT<span class="post-title-source">《用TanStack_Start构建博客（上篇）》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23TanStack_Start" title="#TanStack_Start">#TanStack_Start</a> <a href="/search/result?q=%23TanStack_Router" title="#TanStack_Router">#TanStack_Router</a> <a href="/search/result?q=%23Server_Functions" title="#Server_Functions">#Server_Functions</a> <a href="/search/result?q=%23%E9%9D%99%E6%80%81%E9%A2%84%E6%B8%B2%E6%9F%93" title="#静态预渲染">#静态预渲染</a> <a href="/search/result?q=%23Markdown%E5%8D%9A%E5%AE%A2" title="#Markdown博客">#Markdown博客</a> <a href="/search/result?q=%23%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE" title="#代码高亮">#代码高亮</a><br /><br />总结：<br />本文通过实战案例演示如何使用 TanStack Start 框架构建一个 Markdown 博客系统。文章重点介绍了 Server Functions 解决同构加载器无法访问文件系统的问题、动态路由参数处理、以及使用 markdown-it 和 Shiki 实现带行号的高亮代码块，为开发者提供了完整的技术实现路径。<br /><br />文章要点：<br />- TanStack Start 是基于 TanStack Router 的轻量级服务端框架，支持 SSR、API 端点和 Server Functions<br />- 使用 <code>import.meta.glob</code> 动态扫描 Markdown 文件，配合 <code>gray-matter</code> 解析文章元数据<br />- Server Functions 是同构应用的关键——无论 loader 在服务端还是客户端运行，都能保证文件读取逻辑始终在服务端执行<br />- 动态路由通过 <code>$slug.tsx</code> 文件命名实现，配合 <code>createFileRoute</code> 和 <code>head</code> 函数设置页面标题<br />- 使用 markdown-it + Shiki 实现代码高亮，通过自定义 transformer 支持 <code>line-numbers</code> 语法标记，结合 CSS counter 渲染行号<br />- 文章预告下篇将介绍静态生成和部署策略<br /><br />文章URL：<a href="https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/" target="_blank" rel="noopener" title="https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/">https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/</a><a class="tgme_widget_message_link_preview" href="https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2" target="_blank" rel="noopener" title="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…"> <div class="link_preview_site_name accent_color">Frontend Masters</div> <img class="link_preview_image" alt="Building a Blog in TanStack (Part 1 of 2)" src="/static/https://cdn4.telesco.pe/file/SdcbHy_4OJWiubsSxzCgJ8NcIYv3G7kH2N2jNrB8t3TbMqiok_ID_AkaDmpPliaU4mXl1YiJIt3X3zT5g_gp8XQIkHth8B2EEC2I6G6apJbHqmdP2u2Iq-PnmtOwfh1fZkB1rppS9zlgzO9GOVVvwO0zRR2yAlmLqAU9C7EOxHZhSNDPt17w8I2KFUxv3OSj56leWB3dwsNJFepmI9N7zNXorIyCzBwmT7GCZHtrwEnltgmCDIt4nT8mhUDinBDAZx9s5sWD59uA5puezmNjeqKksJ_7mhc2d6iqHJLkaLTwRw1kfBYYT_nZECaijRBLRkP0cOM2iq8MiPqUgxhZeg.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Building a Blog in TanStack (Part 1 of 2)</div> <div class="link_preview_description">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…</div> </a>