Blocs de code

La fonctionnalité de blocs de code vous permet d’insérer et d’afficher des extraits de code mis en forme dans un document, avec une coloration syntaxique fournie par Prism.js.

Introduction

Dans Univer Docs, les blocs de code vous permettent de :

• Insérer des extraits de code : ajoutez des blocs de code mis en forme n’importe où dans votre document.
• Appliquer la coloration syntaxique : mettez automatiquement le code en couleur selon le langage.
• Quitter et annuler : quittez ou annulez facilement la mise en forme du code depuis un paragraphe vide.

Mode plugin

Installation

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

Utilisation

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 vous disposez d’une licence commerciale Univer, consultez la page Utiliser une licence côté client pour savoir comment la configurer.

Prise en charge mobile

Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.

API Facade

Veillez à importer la facade avant d’utiliser l’API :

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

Obtenir tous les blocs de code

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

Insérer un bloc de code

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

Quitter un bloc de code

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

Annuler un paragraphe de code vide

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