Tiptap extension code block

A tiptap extension to support code block with shiki, read the docs to learn more.

Installation

pnpm add @vueditor/tiptap-extension-code-block

or

npm install @vueditor/tiptap-extension-code-block

Basic usage

Tip

For more detailed usage，see the examples directory or more comprehensive usage: rich text editor.

import { Editor } from '@tiptap/core'
import { codeBlock } from '@vueditor/tiptap-extension-code-block'

const editor = new Editor({
  extension: [codeBlock]
})

Options

interface CodeBlockOptions {
  // languages from shiki
  languages: LanguageRegistration[][]

  // themes from shiki
  themes: {
    light: ThemeRegistrationRaw
    dark: ThemeRegistrationRaw
  }

  // extend from @tiptap/extension-code-block
  // for more detail, go to https://tiptap.dev/docs/editor/extensions/nodes/code-block
  languageClassPrefix: string
  exitOnTripleEnter: boolean
  exitOnArrowDown: boolean
  defaultLanguage: string | null | undefined
  HTMLAttributes: Record<string, any>
}