返回 文章 build CMS 文章

Simon Willison 发布 LaTeX 渲染器:URL 片段存储与实时预览

一个将 LaTeX 源码存入 URL 片段、支持实时预览与安全渲染的轻量级 Web 工具。

LaTeXURL片段Web工具XSS防护
成长分 / 100 67 综合收获、行动、留存与影响

Simon Willison 发布 LaTeX 渲染器:URL 片段存储与实时预览
为什么值得读了解如何利用 URL 片段存储文档数据,实现无需后端的可分享链接。

学习使用 iframe 沙箱和 DOMPurify 防范 XSS 风险的具体实践。

关键洞察
  1. LaTeX 渲染器可将源码渲染为单个 MathJax 公式或由 faster-latex 排版的完整文档。
  2. 页面将 LaTeX 保存在 URL 片段中,支持可读或压缩链接分享,并可加书签。
  3. 工具支持手动输入、从 URL 或 GitHub Gist 加载,以及从内置示例选取。
转成行动

深入阅读

正文与原文对照

原文保真覆盖:全文原文字符:5477

2026年10月15日

工具

LaTeX 渲染器——LaTeX 渲染器可将 LaTeX 源码转换为渲染后的视图,既可以是由 MathJax 排版显示的单个公式,也可以是由 faster-latex 排版的完整文档或散文片段,编辑器旁边带有实时预览,并有一个工具栏可在“编辑”和“渲染”视图之间切换。源码可以手动输入、从 URL 或 GitHub Gist 加载,或从内置示例中选取,页面会将 LaTeX 保存在 URL 片段中,因此可以以可读或压缩链接的形式分享。

灵感来自 Paul Ford 和 Aboard Foundary 的新 Web 应用 Tiny Little Office,它提供了一套 Web 应用内容编辑器(文字处理器、大纲工具、演示文稿构建器、电子表格、计算器、绘图工具、图表制作器、动画工具、日历和旅行规划器)。

Tiny Little Office 的标志性技巧是将所有文档数据存储在 URL 的 #fragment

部分中,因此使用它创建的每个文档都会成为可收藏、可分享的链接。

它还有一个 llms.txt 文件,告诉智能体如何构造能渲染为文档的 URL。Claude 使用了该文件生成了这个演示文稿链接,该链接解释了 URL 格式的工作原理:

Tiny Little Office 启发我让 Claude Code(Opus 5.5 Extra)构建了一个类似的、可与 LaTeX 配合使用的工具。以下是我使用的提示词序列:

我想要一个工具,你可以通过片段哈希 #code-here 链接到它,它会把那段代码当作 LaTeX 并非常高效地渲染出来。它还应该支持一个前缀,表示该 latex 使用针对 latex 优化的自定义压缩字典进行了压缩。使用 CDN 上可用的最佳 latex 渲染库(也考虑 WebAssembly)。如果在没有片段哈希的情况下加载,则显示一个编辑器,你可以把 latex 粘贴进去,然后切换到“已渲染”视图。那个已渲染视图应该可以加书签。#fragment 视图也应该让你能切换到编辑源码。

由于它在我的工具仓库中已经能正常工作,我让它从我的现有 Markdown 中的 SVG 工具所使用的 <iframe sandbox="...">

机制中汲取灵感,作为对 XSS 风险的防护:

能免受 XSS 攻击吗?我们可以像在 SVG markdown 渲染项目中那样,在 iframe 沙箱中运行

我还让它从那个工具复制了 Gist/URL 加载功能:

我们应该有一个从 URL(或 gist)加载 latex 的选项,类似于 markdown SVG 工具

这里有一个示例链接。该工具使用了 Pako 2.1.0、MathJax 4.1.3、faster-latex 0.3.1 和 DOMPurify 3.4.16。

近期文章

Hello Python 3.15, goodbye 3.10, and now I can use 3.11- 2026年10月12日我的博客的一个新功能,用我的声音构建- 2026年10月9日Claude Haiku 5.5- 2026年10月7日我们将需要对几乎所有东西设置默认硬预算上限- 2026年10月3日