Use Shiki syntax highlighting for codeblocks in Tiptap.

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

The extension extends CodeBlock.

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'
    }),
  ],
})

Go into your TipTap editor, write ```ts, press Enter, and write some code! It loads the language on the fly.

I posted a small screen recording here: https://mastodon.social/@timomeh/112282962825285237

The extension extends CodeBlock and forwards its settings. It additionally adds the following settings:

Which theme to use by default. See https://shiki.style/themes.

Which language to use, when no language was provided. See https://shiki.style/languages.

The library loads themes and languages asynchronously.

When you use a language which isn't supported by Shiki, it silently falls back to no syntax highlighting.

Most of this library is just combining code from two other libraries:

• @tiptap/extension-code-block-lowlight by Tiptap
• prosemirror-highlight by ocavue