Code Block Shiki

Code block extension with shiki for tiptap

WARNING

The extension will override Code block.

Installation

npm

npm install @note-editor/tiptap-extension-code-block-shiki

pnpm

pnpm add @note-editor/tiptap-extension-code-block-shiki

Usage

import { Editor } from '@tiptap/core'
import { codeBlockShiki } from '@note-editor/tiptap-extension-code-block-shiki'

const editor = new Editor({
  content: '<p>@note-editor/tiptap-extension-code-block-shiki</p>',
  extensions: [
    codeBlockShiki
  ]
})

Settings

theme

Theme for highlight, want to see more please check shiki themes

codeBlockShiki.configure({
  theme: 'vitesse-light' // default
})