Typst Preview VSCode

在 vscode 中即时预览您的 Typst 文件！

从 市场 安装此扩展，打开命令面板（Ctrl+Shift+P），并输入 >Typst Preview:。

https://github.com/Enter-tainer/typst-preview/assets/25521218/7a151b3d-fe50-4440-8aab-2cc9a9abcf37

https://github.com/Enter-tainer/typst-preview/assets/25521218/600529ce-8f42-4c2f-a224-b6b73e6ad017

此仓库包含

• 扩展的本机部分，用 rust 编写
• 一个 vscode 扩展，用 typescript 编写

功能

• 低延迟预览：在键入时即时预览您的文档。增量渲染技术使预览延迟尽可能低。
• 在浏览器中打开：在浏览器中打开预览，以便您将其放在另一个显示器上。 https://github.com/typst/typst/issues/1344
• 代码和预览之间的交叉跳转：我们为 typst-preview 实现了类似 SyncTeX 的功能。现在您可以通过点击预览面板跳转到相应的代码位置，反之亦然。

有关与其他工具的比较，请参阅 与其他工具的比较。

错误报告

为了实现高性能的即时预览，我们使用了一个与官方 typst 不同的 渲染后端。我们正在尽最大努力保持渲染结果与官方 typst 一致。我们已建立全面的测试来确保渲染结果的致性。但我们不能保证所有情况下渲染结果都相同。可能存在我们尚未涵盖的未知边缘情况。

因此，如果您遇到任何渲染问题，请将问题报告到此仓库，而不是官方 typst 仓库。

它是如何工作的？

该扩展监视文件更改，并增量编译您的文档到 svg 文件。然后我们使用 websocket 将渲染的 svg 发送到客户端。客户端计算新 svg 与旧 svg 之间的差异，并将差异应用到旧 svg 上。这是通过基于 VDOM 的增量渲染技术完成的。

如果您对细节感兴趣，请参阅Typst-Preview 架构。

无需 VSCode 即可使用

您可以使用二进制文件 typst-preview 作为独立的 typst 预览服务器。它可以用于在浏览器中预览您的文档。例如： typst-preview ./assets/demo/main.typ --partial-rendering。如果您不使用 VSCode 但仍想体验低延迟预览，这将很有用。

与其他编辑器一起使用

• nvim: typst-preview.nvim
• emacs: typst-preview.el

致谢

• typst.ts：typst.ts 提供增量 SVG 导出。
• typst-lsp：CI 和 vscode 扩展大量受到 typst-lsp 的启发。

相关项目

• typstyle：美观且可靠的 typst 代码格式化工具
• tinymist：功能丰富的 typst 语言服务器

法律

本项目与 Typst 品牌、未建立联系、未创建或获得其支持。