Now vibe coding, so learning hammer FE ?
《shadcn/typeset 发布:为HTML内容打造统一排版系统》

标签:#前端 #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 July 2026 - Introducing shadcn/typeset
《用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
- 使用 import.meta.glob 动态扫描 Markdown 文件,配合 gray-matter 解析文章元数据
- Server Functions 是同构应用的关键——无论 loader 在服务端还是客户端运行,都能保证文件读取逻辑始终在服务端执行
- 动态路由通过 $slug.tsx 文件命名实现,配合 createFileRoutehead 函数设置页面标题
- 使用 markdown-it + Shiki 实现代码高亮,通过自定义 transformer 支持 line-numbers 语法标记,结合 CSS counter 渲染行号
- 文章预告下篇将介绍静态生成和部署策略

文章URL:https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/ Building a Blog in TanStack (Part 1 of 2)
 
 
Back to Top