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

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

Uso

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.

API de fachada

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

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

Obtener todos los bloques de código

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

Insertar un bloque de código

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

Salir de un bloque de código

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

Cancelar código vacío Párrafo

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

Fuentes monoespaciadas para código

El selector de la barra del bloque de código muestra solo fuentes registradas con FontCategory.MONOSPACE. La selección se aplica a todo el bloque, incluidos los estilos de párrafo.

Registre una fuente personalizada con addFonts() como se muestra abajo. Esto añade una opción; cargue el archivo por separado mediante CSS o FontFace, como se explica en fuentes personalizadas. Esta API funciona tanto con plugins como con presets.

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