typst.ts：在JavaScript世界中运行Typst-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00262/article/details/142429420

typst.ts：在JavaScript世界中运行Typst

typst.ts Run Typst in JavaScriptWorld. 项目地址: https://gitcode.com/gh_mirrors/ty/typst.ts

项目介绍

typst.ts 是一个致力于将Typst的强大功能带入JavaScript环境的项目。简而言之，它提供了typst::World的实现和多个导出器，旨在帮助你在浏览器环境中编译和渲染Typst文档。该库支持三种主要的呈现形式：直接将文档渲染为高质量的SVG图像（形式一），预处理到矢量格式的艺术品（形式二），以及直接操作HTML中的canvas元素（形式三）。形式二专为Typst文档设计，提供多种高级特性，适应不同场景的渲染需求。

项目快速启动

要快速启动使用typst.ts，首先确保你的开发环境已经安装了Node.js和Yarn或NPM。以下是安装和使用的基本步骤：

CLI安装（可选）

如果你偏好命令行方式：

cargo install --locked --git https://github.com/Myriad-Dreamin/typst.ts typst-ts-cli

或者从GitHub Releases下载最新版本的CLI。

包安装（推荐）

通过npm获取核心库和其他绑定库：

npm install @myriaddreamin/typst-ts
# 或者，如果你是React项目
npm install @myriaddreamin/typst-react
# 对于Angular项目
npm install @myriaddreamin/typst-angular

示例代码快速运行

创建一个简单的HTML文件来展示如何使用typst.ts进行文档渲染：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Typst文档渲染示例</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts/dist/esm/contrib/all-in-one-lite.bundle.js" id="typst"></script>
</head>
<body>
<textarea id="input" style="width: 100%;"></textarea>
<div id="content"></div>

<script type="module">
    import * as $typst from '@myriaddreamin/typst-ts';

    const input = document.getElementById('input');
    input.value = '你好，Typst的世界！';

    $typst.setCompilerInitOptions({
        getModule: () => 'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-web-compiler/pkg/typst_ts_web_compiler_bg.wasm'
    });
    $typst.setRendererInitOptions({
        getModule: () => 'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm'
    });

    const compile = (mainContent) => {
        $typst.svg([mainContent]).then(svg => {
            console.log(`已渲染SVG元素，长度：${svg.length}`);
            document.getElementById('content').innerHTML = svg;
        });
    };

    input.oninput = () => compile(input.value);
    compile(input.value);
</script>
</body>
</html>

将以上代码保存为index.html并用本地服务器运行，即可体验Typst文档的实时渲染。