---
title: "行高扩展"
description: "使用颜色扩展为您的 Tiptap 编辑器添加文本行高支持。有关更多信息，请查看我们的文档。"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/line-height"
---

# 行高扩展

使用颜色扩展为您的 Tiptap 编辑器添加文本行高支持。有关更多信息，请查看我们的文档。

此扩展使您能够在编辑器中设置行高。它使用 [`TextStyle`](https://tiptap.zhcndoc.com/editor/extensions/marks/text-style.md) 标记，该标记呈现为 `<span>` 标签（仅此而已）。然后，行高作为内联样式应用，例如 `<span style="line-height: 1.5">`。

> **Interactive demo:** [LineHeight](https://embed.tiptap.dev/preview/Extensions/LineHeight)

## 安装

```bash
npm install @tiptap/extension-text-style
```

此扩展需要 [`TextStyle`](https://tiptap.zhcndoc.com/editor/extensions/marks/text-style.md) 标记。

```ts
import { Editor } from '@tiptap/core'
import { TextStyle, LineHeight } from '@tiptap/extension-text-style'

new Editor({
  extensions: [TextStyle, LineHeight],
})
```

此扩展默认与 `TextStyleKit` 扩展一起安装，因此您无需单独安装它。

```ts
import { Editor } from '@tiptap/core'
import { TextStyleKit } from '@tiptap/extension-text-style'

new Editor({
  extensions: [TextStyleKit],
})
```

## 设置

### types

应应用行高属性的标记列表。

默认值: `['textStyle']`

```js
LineHeight.configure({
  types: ['textStyle'],
})
```

## 命令

### setLineHeight()

将给定的行高应用为内联样式。

```js
editor.commands.setLineHeight('1.1')
```

### unsetLineHeight()

移除任何行高。

```js
editor.commands.unsetLineHeight()
```

## 源代码

[packages/extension-text-style/src/line-height/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/src/line-height/)

## 最小安装

```js
import { Editor } from '@tiptap/core'
import { LineHeight } from '@tiptap/extension-text-style/line-height'

new Editor({
  extensions: [LineHeight],
})
```