Code Block
Plugins Info
The code block feature allows you to insert and display formatted code snippets within a document, with syntax highlighting powered by Prism.js.
Introduction
In Univer Docs, code blocks enable you to:
- Insert code snippets: Add formatted code blocks anywhere in your document.
- Syntax highlighting: Automatically highlight code based on language.
- Exit and cancel: Easily exit or cancel code formatting from empty paragraphs.
Plugin Mode
Installation
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-uiUsage
TypeScript
import { UniverDocsCodePlugin } from '@univerjs-pro/docs-code'import { UniverDocsCodeUIPlugin } from '@univerjs-pro/docs-code-ui'import DocsCodeUIEnUS from '@univerjs-pro/docs-code-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-code-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DocsCodeUIEnUS, ), },})univer.registerPlugin(UniverDocsCodePlugin)univer.registerPlugin(UniverDocsCodeUIPlugin)If you have a commercial license for Univer, please refer to Using License in Client for configuration.
Facade API
Make sure to import the facade before using the API:
TypeScript
import '@univerjs-pro/docs-code/facade'Get All Code Blocks
TypeScript
const doc = univerAPI.getActiveDocument()const codes = doc?.getCodes() ?? []Insert a Code Block
TypeScript
const doc = univerAPI.getActiveDocument()const code = doc?.insertCode({ startOffset: 12, endOffset: 35,})Exit a Code Block
TypeScript
const doc = univerAPI.getActiveDocument()doc?.exitCode()Cancel Empty Code Paragraph
TypeScript
const doc = univerAPI.getActiveDocument()doc?.cancelEmptyCodeParagraph()How is this guide?