https://github.com/vueditor/tiptap-extension-code-block

A tiptap extension to support code block with shiki
https://github.com/vueditor/tiptap-extension-code-block

code-block editor shiki tiptap tiptap-extension

Last synced: 23 days ago
JSON representation

A tiptap extension to support code block with shiki

• Host: GitHub
• URL: https://github.com/vueditor/tiptap-extension-code-block
• Owner: vueditor
• License: mit
• Created: 2024-09-15T15:12:59.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-11-03T17:57:06.000Z (4 months ago)
• Last Synced: 2025-11-03T19:30:03.370Z (4 months ago)
• Topics: code-block, editor, shiki, tiptap, tiptap-extension
• Language: TypeScript
• Homepage: https://vueditor.litingyes.top
• Size: 659 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Tiptap extension code block

![GitHub License](https://img.shields.io/github/license/vueditor/tiptap-extension-code-block?style=plastic) ![NPM Version](https://img.shields.io/npm/v/%40vueditor%2Ftiptap-extension-code-block?style=plastic) ![NPM Downloads](https://img.shields.io/npm/dm/%40vueditor%2Ftiptap-extension-code-block?style=plastic)  ![GitHub Repo stars](https://img.shields.io/github/stars/vueditor/tiptap-extension-code-block?style=plastic)

A tiptap extension to support code block with [shiki](https://shiki.style/), read the [docs](https://vueditor.litingyes.top/) to learn more.

## Installation

```bash

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

```

or

```bash

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

```

## Basic usage

> [!TIP]

> For more detailed usage，see the [examples](./examples/) directory or more comprehensive usage: [rich text editor](https://github.com/vueditor/rich-text-editor.git).

```ts

import { Editor } from '@tiptap/core'

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

const editor = new Editor({

  extension: [codeBlock]

})

```

### Options

```ts

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

}

```