NPG 魔法報紙

每日深稿 第 128 期

Simon Willison 用 Claude Code 打造 LaTeX 網址渲染工具

透過 URL 片段直接渲染 LaTeX 公式,支援壓縮與沙箱安全機制。

文/魔法報紙編輯部 · 依 simonwillison.net 報導整理 · 看原文

Simon Willison 用 Claude Code 打造 LaTeX 網址渲染工具
圖片來源:simonwillison.net(原報導配圖)

三個重點

  1. 使用 Claude Code (Opus 5.5 Extra) 開發
  2. 採用 Pako 2.1.0 與 MathJax 4.1.3
  3. 引入 iframe sandbox 防 XSS

事件概要

Simon Willison 於 2026 年 10 月 15 日發布了一篇關於 LaTeX 渲染器的文章。該工具受 Tiny Little Office 啟發,核心功能是將 LaTeX 代碼存入 URL 的 fragment 部分,使連結可直接分享並渲染。開發過程使用 Claude Code (Opus 5.5 Extra) 完成,並整合了 Pako 2.1.0、MathJax 4.1.3、faster-latex 0.3.1 及 DOMPurify 3.4.16 等庫。

前因與轉變

Tiny Little Office 提供了一套網頁內容編輯器,其特色是將文件數據存於 URL fragment,並提供 llms.txt 檔案讓 AI 代理理解如何建構可渲染的 URL。Simon Willison 受此啟發,決定開發類似但專精於 LaTeX 的工具,並要求支援自定義壓縮字典以優化 LaTeX 傳輸效率。

實務應用

使用者可將 LaTeX 代碼貼入編輯器,切換至「rendered」視圖後即可複製 bookmarkable 連結。若需從外部載入,工具支援從 URL 或 Gist 讀取 LaTeX 代碼。原文沒有提供具體的部署步驟,但指出該工具位於 Simon Willison 的工具倉庫中,並參考了 SVG in Markdown 工具的 iframe sandbox 機制來防禦 XSS 風險。

同類比較

原文提到 Tiny Little Office 是一個包含文字處理器、試算表等多種編輯器的套件,而本工具專注於 LaTeX 渲染。兩者皆利用 URL fragment 儲存數據以實現分享功能,但 Tiny Little Office 強調多工具整合,本工具則專注於數學公式與科學文件的快速渲染與分享。

編輯觀察

  1. AI 輔助開發的實戰範例:此案例展示了如何利用 Claude Code 快速將概念轉化為具備安全考量(XSS 防護)與性能優化(壓縮)的完整網頁應用,對前端開發者具有參考價值。
  2. URL 即應用(URL as App)的趨勢:將複雜的渲染邏輯封裝在 URL fragment 中,降低了分享技術內容的門檻,特別適合學術界與工程師分享數學推導或程式碼片段。
  3. 安全與性能的平衡:引入 iframe sandbox 與 DOMPurify 顯示了在處理用戶輸入(LaTeX 代碼)時,對安全性與渲染速度的權衡考量,這是建構類似工具時必須面對的技術挑戰。

原始報導:simonwillison.net《Simon Willison:LaTeX renderer》
https://simonwillison.net/2026/Oct/15/latex/
事實段落只寫原文有的內容;「編輯觀察」是本報的判斷,不是原文內容。

回到今天的魔法報紙 →