Bloque de código
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-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-uiUso
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.
| Paquete | Registro de escritorio | Registro móvil |
|---|---|---|
@univerjs-pro/docs-code-ui | UniverDocsCodeUIPlugin | UniverDocsCodeMobileUIPlugin |
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?