基础标记 - Plate

<Cards> <Card icon="bold" title="加粗" href="/docs/bold"> 应用加粗格式来强调重要文本。 </Card> <Card icon="italic" title="斜体" href="/docs/italic"> 应用斜体格式以实现强调或风格效果。 </Card> <Card icon="underline" title="下划线" href="/docs/underline"> 为文本添加下划线格式。 </Card> <Card icon="strikethrough" title="删除线" href="/docs/strikethrough"> 应用删除线格式表示已删除内容。 </Card> <Card icon="code" title="代码" href="/docs/code"> 格式化内联代码片段和技术术语。 </Card> <Card icon="subscript" title="下标" href="/docs/subscript"> 将文本格式化为下标用于数学表达式。 </Card> <Card icon="superscript" title="上标" href="/docs/superscript"> 将文本格式化为上标用于数学表达式。 </Card> <Card icon="kbd" title="键盘键" href="/docs/kbd"> 显示键盘快捷键和组合键。 </Card> <Card icon="highlight" title="高亮" href="/docs/highlight"> 用背景色高亮重要文本。 </Card> </Cards> <ComponentPreview name="basic-marks-demo" />

套件使用

<Steps>

安装

BasicMarksKit 集成了加粗、斜体、下划线、删除线、代码、下标、上标、高亮和键盘键标记的插件，以及来自 Plate UI 的相应 UI 组件。同时也注册了这些 mark family 自带的 Markdown input rules。

CodeLeaf: 渲染内联代码元素。
HighlightLeaf: 渲染高亮文本元素。
KbdLeaf: 渲染键盘快捷键元素。

添加套件

将套件添加到你的插件中：

tsx

import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ...BasicMarksKit,
  ],
});

</Steps>

该套件默认启用常见的 mark 快捷输入，例如：

**bold** / __bold__
*italic* / _italic_
`code`
~~strike~~
~sub~
^sup^
==highlight==

完整运行时模型请参阅 Plugin Input Rules。

手动使用

bash

npm install @platejs/basic-nodes

添加工具栏按钮

你可以将 MarkToolbarButton 添加到工具栏来控制文本格式标记。

如需单个插件的设置和配置，请参阅上方链接的特定插件文档页面。