Fusuma：Markdown一键生成幻灯片和社交卡片

Fusuma：Markdown一键生成幻灯片和社交卡片 | 前端进阶之旅

Full translation

完整中文译文

你好，我是 Maneshwar。我正在开发 git-lrc，一个在每次提交时运行的微型 AI 代码审查工具。它是免费的且代码开源，源代码托管在 Github 上。如果喜欢这个项目，请 Star git-lrc 帮助开发者发现它。欢迎试用并分享你的反馈。

Fusuma（襖）是传统日本房屋中的推拉门，如果你没有见过的话。

没有铰链，不会摇晃到人脸上，你只需要推拉它，房间就会变成另一个房间。

所以当 hiroppy 将他的 Markdown 转幻灯片工具命名为 fusuma 时，这个双关语已经内置在产品中了：你编写一个扁平的文件，在各个部分之间"推拉"就可以将其转换为演示文稿。

我看到你在这里做了什么，我很欣赏。

在这个星期之前，我从未使用过 fusuma。

我安装了它，搭建了一个真实的项目，编写了实际的幻灯片用 fusuma 解释 fusuma，运行了构建管道，然后钻进 node_modules 中进行探索。原因是构建期间的 CLI 输出显示了一些让我停下来说"等等，它在做什么？"的信息。

我们稍后会讲到这一点。首先，让我们了解基础知识。

推销词：一个文件，无需编辑器

你安装它，运行一个命令，就可以获得一个演示文稿：

npm install fusuma -D
npx fusuma init

这将生成一个 slides/ 文件夹、一个 style.css 和一个 .fusumarc.yml 配置文件。

你的实际内容存在于纯 Markdown 中，每一个单独一行的 --- 就会开始一张新幻灯片。

这就是整个创作模型。

没有幻灯片对象，没有专有文件格式，不需要点击"插入文本框"四十次。

<!-- classes: title -->

# Hello😃

---

<!-- section-title: Bye👋 -->

## Bye👋

# Hello😃 上方的 HTML 注释语法不是装饰，它是一个指令，fusuma 的解析器会读取它以将 .title CSS 类应用于该幻灯片，而 section-title 则设置侧边栏导航中显示的内容。

这是一个聪明的技巧：保持文件作为有效的、可渲染的 Markdown，供任何在 GitHub 上查看的人使用，同时通过纯 Markdown 渲染器会忽略的注释来传输演示元数据。

这是我使用 fusuma 构建的四张幻灯片演示文稿中的真实呈现，用于解释 fusuma，运行 pop 主题：

一旦你对内容满意，npx fusuma start 会为你启动一个在 :8080 上的开发服务器，在每次保存时进行热重载，无需完整页面刷新，没有构建步骤阻碍你的编辑循环：

$ npx fusuma start
  fusuma  Compiled successfully
  fusuma  Server running at http://localhost:8080/

然后，当你真正完成时，同一个文件就会转变为你接下来需要的任何东西：

npx fusuma build   # optimized static HTML/JS bundle
npx fusuma pdf     # the deck as a single PDF
npx fusuma deploy  # pushes build/ straight to GitHub Pages

一个 Markdown 源文件，转换为你需要的任何输出。这又是那个双关语。我保证我会放松。

我构建了元版本：关于 fusuma 的 fusuma 幻灯片

上面的每个截图都来自同一个真实项目，而不是模型：一个四张幻灯片的演示文稿（slides/0-slide.md），它用 fusuma 解释 fusuma，通过一个 CSS 导入启用了内置的 pop 主题：

@import '@fusuma/client/assets/style/themes/pop.css';

这就是整个主题 API。

你看到的突出显示的代码块通过 @fusuma/prism-loader 运行 Prism，整个项目都使用 webpack 5 进行打包。

我停下来说"等等，什么"的部分

这是真正让我打开源代码的原因。我在一个没有配置 git 远程的文件夹中运行了 npx fusuma build，并得到了这个结果：

- Fetching the remote origin url...
 build  The remote origin url of this repo isn't found.
 build  If you want to generate og:image, please set fusumarc.meta.url

好的，这只是一个小警告，没什么大不了的。但是"generate og:image"让我对它如何生成该图像感到好奇，因为大多数工具要么用画布库模板化，要么就跳过。

所以我开始挖掘 packages/fusuma/src/server/dynamicRenderingServer.js，结果发现 fusuma 并不是模板化社交预览卡片。

它通过 Puppeteer 启动一个真实的无头 Chrome，将其指向临时本地服务器上新构建的演示文稿，并获取你真实第一张幻灯片的真实截图作为 og:image。

然后，使用同一个打开的浏览器标签页，它针对实时页面运行 pa11y（不是 Lighthouse，尽管你可能会猜测）进行可访问性审计，过滤掉一些已知的噪声规则和 <code> 块内的任何内容。

所以"构建"步骤不仅仅是运行一个打包器。

这是一个打包器，然后是一个完整的一次性浏览器打开你自己的演示文稿，在任何人看到它之前拍摄自己的照片。

当我在 @fusuma/mdx-loader 源代码中时，我找到了三个指令驱动的功能，这些功能在我已阅读的文档中从未出现过。

Fusuma 将你的 Markdown 解析为 MDX，这意味着围栏块和 HTML 注释可以在构建时交换为实际的 JSX 组件：

标记为 chart 或 mermaid 的围栏块会被交换为 <div class="mermaid">，在演示文稿本身中呈现为实时 Mermaid 图表。
用  注释包装一个 JS 代码块，fusuma 会在其旁边添加一个"execute"按钮，可以在浏览器中在观众面前实时运行你的代码段。真实的运行时演示，无需单独标签页。
 会在构建时生成一个内联 SVG QR 代码，这样人们可以扫描你的幻灯片而不是费力看 URL。

这些都没有在 README 的顶部附近进行广告宣传。

你只能通过从内存中编写某个其他工具的注释语法并希望，或者像我一样阅读 mdxPlugin.js 来找到它。

我实际上会使用它吗

对于快速、可版本控制、git 可差异化的演示文稿，是的，说实话。

零配置设置是真实的，start 的热重载循环很快，你的可访问性审计和 og:image 都来自同一个 Puppeteer 通过是真正聪明的工程设计，而不仅仅是营销文案。

我不会使用它来构建 200 张幻灯片的会议主题演讲，因为对于不熟悉 Markdown 的人来说没有视觉编辑器。但对于内部技术讲座、"这是我们服务的工作方式"演示文稿或通过制作关于该工具的幻灯片来记录工具（见上面），这是一个坚实、诚实的小门可以推开。

如果你想自己尝试，源代码在 hiroppy/fusuma，如果你对自拍式构建步骤感到好奇，确切的文件就在这里：dynamicRenderingServer.js。负责任地推拉。

感谢 about_hiroppy 提供了如此顺畅的软件。

AI agent 代码编写

AI agent 代码编写速度很快。它们也会悄悄地删除逻辑、改变行为并引入错误 — 而不会告诉你。你通常会在生产环境中发现。

git-lrc 解决了这个问题。它挂钩到 git commit 并在每个差异落地前对其进行审查。60 秒设置。完全免费。

欢迎任何反馈或贡献者！它在线、源代码可用，随时可供任何人使用。

在 Git 提交时运行的免费微型 AI 代码审查

在提交时运行的免费微型 AI 代码审查

如今的 GenAI 就像一辆没有制动器的赛车。它加速很快 -- 你描述一些东西，大块的代码立即出现。但是 AI agent 会悄悄地破坏东西：它们删除逻辑、放松约束、引入昂贵的云调用、泄露凭据并改变行为 -- 而不会告诉你。你通常会在生产环境中发现。

git-lrc 是你的制动系统。它挂钩到 git commit 并在每个差异落地前对其运行 AI 审查。60 秒设置。完全免费。

简而言之，git-lrc 帮助在故障、漏洞和技术债务发生之前防止它们

一眼看去：10 个风险类别 · 100+ 个失败模式追踪 · 每次提交…

对于进一步的行动，你可能考虑阻止此人和/或报告滥用