코드 블록

Plugin 정보
Headless 지원

코드 블록 기능을 사용하면 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()

코드 블록 고정폭 글꼴

코드 블록 도구 모음의 글꼴 선택기에는 FontCategory.MONOSPACE로 등록된 글꼴만 표시됩니다. 선택한 글꼴은 문단 스타일을 포함한 코드 블록 전체에 적용됩니다.

사용자 정의 고정폭 글꼴은 아래처럼 addFonts()로 등록합니다. 등록은 선택지만 추가하므로 글꼴 파일은 CSS나 FontFace API로 별도 로드해야 합니다. 사용자 정의 글꼴을 참고하세요. 이 API는 플러그인과 프리셋 모드 모두에서 사용할 수 있습니다.

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

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.