Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://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>