代码块
代码块功能允许您在文档中插入和显示格式化的代码片段，并通过 Prism.js 实现语法高亮。
介绍
在 Univer Docs 中，代码块使您能够：
- 插入代码片段：在文档的任何位置添加格式化的代码块。
- 语法高亮：根据编程语言自动高亮代码。
- 退出和取消：轻松从空段落退出或取消代码格式。
插件模式
安装
Shell
pnpm add @univerjs-pro/docs-code @univerjs-pro/docs-code-uiShell
npm install @univerjs-pro/docs-code @univerjs-pro/docs-code-uiShell
yarn add @univerjs-pro/docs-code @univerjs-pro/docs-code-uiShell
bun add @univerjs-pro/docs-code @univerjs-pro/docs-code-ui使用
TypeScript
import { UniverDocsCodePlugin } from '@univerjs-pro/docs-code'import { UniverDocsCodeUIPlugin } from '@univerjs-pro/docs-code-ui'import DocsCodeUIZhCN from '@univerjs-pro/docs-code-ui/locale/zh-CN'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-code-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.ZH_CN, locales: { [LocaleType.ZH_CN]: mergeLocales( DocsCodeUIZhCN, ), },})univer.registerPlugin(UniverDocsCodePlugin)univer.registerPlugin(UniverDocsCodeUIPlugin)如果您拥有 Univer 商业许可证，请参阅在客户端使用许可证进行配置。
Facade API
使用 API 前请确保已导入 facade：
TypeScript
import '@univerjs-pro/docs-code/facade'获取所有代码块
TypeScript
const doc = univerAPI.getActiveDocument()const codes = doc?.getCodes() ?? []插入代码块
TypeScript
const doc = univerAPI.getActiveDocument()const code = doc?.insertCode({ startOffset: 12, endOffset: 35,})退出代码块
TypeScript
const doc = univerAPI.getActiveDocument()doc?.exitCode()取消空代码段落
TypeScript
const doc = univerAPI.getActiveDocument()doc?.cancelEmptyCodeParagraph()你觉得这篇文档如何？