Блок кода

Функция блоков кода позволяет вставлять в документ и отображать в нём форматированные фрагменты кода с подсветкой синтаксиса на базе Prism.js.

Введение

Блоки кода в Univer Docs позволяют:

• Вставлять фрагменты кода: добавлять форматированные блоки кода в любое место документа.
• Подсвечивать синтаксис: автоматически выделять элементы кода в зависимости от языка.
• Выходить из блока и отменять форматирование: легко завершать или отменять форматирование кода в пустых абзацах.

Режим плагинов

Установка

pnpm add @univerjs-pro/docs-code @univerjs-pro/docs-code-ui

npm install @univerjs-pro/docs-code @univerjs-pro/docs-code-ui

yarn add @univerjs-pro/docs-code @univerjs-pro/docs-code-ui

bun add @univerjs-pro/docs-code @univerjs-pro/docs-code-ui

Использование

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; не регистрируйте оба варианта.

Facade API

Перед использованием API обязательно импортируйте фасад:

import '@univerjs-pro/docs-code/facade'

Получение всех блоков кода

const doc = univerAPI.getActiveDocument()const codes = doc?.getCodes() ?? []

Вставка блока кода

const doc = univerAPI.getActiveDocument()const code = doc?.insertCode({  startOffset: 12,  endOffset: 35,})

Выход из блока кода

const doc = univerAPI.getActiveDocument()doc?.exitCode()

Отмена пустого абзаца с кодом

const doc = univerAPI.getActiveDocument()doc?.cancelEmptyCodeParagraph()

Моноширинные шрифты кода

Список шрифтов на панели блока кода содержит только шрифты, зарегистрированные с FontCategory.MONOSPACE. Выбор применяется ко всему блоку, включая стили абзацев.

Зарегистрируйте свой шрифт через addFonts(), как в примере. Регистрация добавляет пункт списка; сам файл нужно загрузить через CSS или FontFace, см. собственные шрифты. API работает при инициализации через плагины и пресеты.

import { FontCategory } from '@univerjs/ui'import '@univerjs/ui/facade'univerAPI.addFonts([  { value: 'JetBrains Mono', label: 'JetBrains Mono', category: FontCategory.MONOSPACE },])