Community Extension: Shiki Code Block

[timomeh]

Description

It's the CodeBlock extension, but with shiki syntax highlighting. Supports all shiki themes, languages and dark/light mode.

https://github.com/timomeh/tiptap-extension-code-block-shiki

Installation

npm install shiki tiptap-extension-code-block-shiki

Please note that shiki is a peer dependency and must be installed by yourself.

Usage

Add CodeBlockShiki to your extensions. It extends the vanilla CodeBlock extension and supports all its options, and additionally a few more. The theme can be specified either globally or per node.

Docs here: https://github.com/timomeh/tiptap-extension-code-block-shiki

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import CodeBlockShiki from 'tiptap-extension-code-block-shiki'

new Editor({
  extensions: [
    StarterKit.configure({ codeBlock: false }),
    CodeBlockShiki.configure({
      defaultTheme: 'tokyo-night',
      themes: {
        light: 'github-light',
        dark: 'github-dark',
      },
    }),
  ],
})

Type

Node

Other

Very open to contributions: https://github.com/timomeh/tiptap-extension-code-block-shiki