Bloque de código

Información de complementos

La función de bloque de código le permite insertar y mostrar fragmentos de código formateados dentro de un documento, con resaltado de sintaxis impulsado por Prism.js.

Introducción

En Univer Docs, los bloques de código le permiten:

  • Insertar fragmentos de código: agregar bloques de código formateados en cualquier parte de su documento.
  • Resaltado de sintaxis: resaltar código automáticamente según el idioma.
  • Salir y cancelar: salir o cancelar fácilmente el formato de código de párrafos vacíos.

Modo de complemento

Instalación

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

Uso

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)

Si tiene una licencia comercial para Univer, consulte Uso de la licencia en el cliente para la configuración.

Compatibilidad móvil

Configure primero el editor móvil. En la inicialización en modo plugin de esta página, sustituya los registros de escritorio siguientes por las exportaciones móviles de los mismos paquetes antes de abrir un documento. Conserve modelos, estilos, traducciones e importaciones Facade; no registre ambas variantes.

PaqueteRegistro de escritorioRegistro móvil
@univerjs-pro/docs-code-uiUniverDocsCodeUIPluginUniverDocsCodeMobileUIPlugin

API de fachada

Asegúrese de importar la fachada antes de usar la API:

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

Obtener todos los bloques de código

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

Insertar un bloque de código

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

Salir de un bloque de código

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

Cancelar código vacío Párrafo

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

¿Cómo es esta guía?

© 2026 DreamNum Co., Ltd.