程式碼區塊
程式碼區塊功能允許您在文件中插入和顯示格式化的程式碼片段，並透過 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 DocsCodeUIZhTW from '@univerjs-pro/docs-code-ui/locale/zh-TW'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-code-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.ZH_TW, locales: { [LocaleType.ZH_TW]: mergeLocales( DocsCodeUIZhTW, ), },})univer.registerPlugin(UniverDocsCodePlugin)univer.registerPlugin(UniverDocsCodeUIPlugin)如果您擁有 Univer 商業授權，請參閱在用戶端使用授權進行配置。
行動裝置支援
先設定行動版編輯器。在本頁外掛模式的初始化程式碼中，將下列桌面版註冊替換為同一套件匯出的行動版外掛，並在開啟文件前完成。保留模型外掛、樣式、語言套件與 Facade 匯入，請勿同時註冊兩個版本。
| 套件 | 桌面版註冊 | 行動版註冊 |
|---|---|---|
@univerjs-pro/docs-code-ui | UniverDocsCodeUIPlugin | UniverDocsCodeMobileUIPlugin |
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()你覺得這篇文檔如何？