Typst CSS

概述

Typst CSS 功能将 CSS 属性转换为 Typst 属性，以允许 HTML 格式和 Typst 格式之间的样式相似。

它针对两种使用场景进行了调整：

由表格包样式化的 HTML 表格
表示带有颜色装饰的控制台输出的 HTML <pre> 标签，例如来自 ANSI。

本文档适用于：

希望生成可转换为 Typst 的 table 或 pre 输出的包开发者
希望改进 CSS 属性翻译或添加其他 CSS 属性的扩展开发者

它描述了 Typst CSS 的工作原理、如何启用和禁用此功能以及相关的 pre 标签处理、故障排除以及添加或更改翻译过滤器。

Typst CSS 的工作原理

除非禁用了表格处理，否则 HTML 原始块中的表格将被解析为 Pandoc AST，然后由输出格式写入。

当输出格式为 Typst 时，Quarto 将 juice HTML 输入，并使用 HTML 原始块中包含的样式表中的规则为 HTML 元素添加 CSS 属性。 Quarto 的后处理过滤器将 HTML 属性和 CSS 属性转换为 typst:property 或 typst:text:property 形式的属性，Pandoc 中的 Typst 写入器会相应地写入输出。

你可以选择加入以相同方式处理 pre 标签：请参阅 pre 标签处理。

支持的元素和属性

Typst CSS 适用于以下特定组合的 HTML 元素和 CSS 属性：

	span	div	table	td
background-color	✓			✓
border¹				✓
color	✓			✓
font-family		✓	✓
font-size		✓	✓
opacity	✓			✓
align²				✓

禁用 Typst CSS

CSS 到 Typst 的 Lua 过滤器在整个 AST 上运行（而不仅仅是表格和 pre 标签）。出于故障排除目的，可以通过以下方式禁用过滤器：

format:
  typst:
    css-property-processing: none

`pre` 标签处理

pre 标签处理旨在通过 HTML 自动将 ANSI 转换为 Typst。Quarto 目前不捕获执行的 ANSI 输出，但此功能适用于包和扩展。

pre 标签处理是通过直接包围 HTML 原始块的 div 上的 html-pre-tag-processing="parse" 选择加入的：

::: {html-pre-tag-processing="parse"}

```{=html}
<pre>...</pre>
```
:::

故障排除

为了确保包输出的 HTML 表格可以通过 Typst CSS 进行转换，请使用 keep-md: true 渲染文档。然后检查 .typst.md 文件中的 HTML 原始块，例如

```{=html}
<table>
</table>
```

原始块必须包含一个 HTML <table> 标签，该标签前面可能会有样式表（<style>）。

类似地，用于 pre 标签处理的原始块必须包含一个 <pre> 标签，该标签前面可能会有样式表。

修改翻译

你可以添加自己的 Lua 过滤器来添加或更改 CSS 属性到 Typst 属性的翻译。

请参阅 Pandoc 文档中的 Typst 属性输出和将 CSS 属性翻译为 Typst 的 Lua 过滤器的源代码。

你可以通过在 Typst CSS Lua 过滤器之前运行你的过滤器并移除 CSS 属性（未测试）来覆盖 Typst CSS Lua 过滤器的行为。你可以通过在 Typst CSS Lua 过滤器之前或之后运行你的过滤器来添加对其他 CSS 属性的支持。

Footnotes

border, border-left 等, border-width, border-style, border-color, border-left-width 等↩︎
text-align, vertical-align↩︎

概述