コードブロック

プラグイン情報
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 DocsCodeUIJaJP from '@univerjs-pro/docs-code-ui/locale/ja-JP'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-code-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.JA_JP,  locales: {    [LocaleType.JA_JP]: mergeLocales(      DocsCodeUIJaJP,     ),  },})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.