Блок кода
Функция блоков кода позволяет вставлять в документ и отображать в нём форматированные фрагменты кода с подсветкой синтаксиса на базе 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 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)Если у вас есть коммерческая лицензия Univer, инструкции по настройке см. в разделе Использование лицензии на клиенте.
Поддержка мобильных устройств
Сначала настройте мобильный редактор. В коде инициализации режима плагинов на этой странице замените указанные настольные регистрации мобильными экспортами тех же пакетов до открытия документа. Сохраните модели, стили, локализации и импорты Facade; не регистрируйте оба варианта.
| Пакет | Настольная регистрация | Мобильная регистрация |
|---|---|---|
@univerjs-pro/docs-code-ui | UniverDocsCodeUIPlugin | UniverDocsCodeMobileUIPlugin |
Facade API
Перед использованием API обязательно импортируйте фасад:
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()Насколько полезно это руководство?