Web SDK

코드 블록

Plugin 정보

코드 블록 기능을 사용하면 Prism.js 기반의 구문 강조와 함께 서식이 적용된 코드 조각을 문서에 삽입하고 표시할 수 있습니다.

소개

Univer Docs에서 코드 블록을 사용하면 다음 작업을 할 수 있습니다.

  • 코드 조각 삽입: 문서 어디에나 서식이 적용된 코드 블록을 추가합니다.
  • 구문 강조: 언어에 따라 코드를 자동으로 강조합니다.
  • 종료 및 취소: 빈 단락에서 코드 서식을 간편하게 종료하거나 취소합니다.

플러그인 모드

설치

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

사용법

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)

Univer 상용 라이선스가 있다면 구성 방법은 클라이언트에서 라이선스 사용을 참고하세요.

모바일 지원

먼저 모바일 에디터를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 문서를 열기 전에 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.

패키지데스크톱 등록모바일 등록
@univerjs-pro/docs-code-uiUniverDocsCodeUIPluginUniverDocsCodeMobileUIPlugin

Facade API

API를 사용하기 전에 facade를 가져와야 합니다.

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

모든 코드 블록 가져오기

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

코드 블록 삽입

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

코드 블록 종료

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

빈 코드 단락 취소

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

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.