Shiki Tiptap Extension

Use Shiki syntax highlighting for codeblocks in Tiptap.

Installation

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

Usage

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.

Demo

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

Settings

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

defaultTheme

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

defaultLanguage

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

Notes

Lazy loading

The library loads themes and languages asynchronously. You may see that the code is not highlighted for a short moment, while the theme and language is loading.

Unknown language fallback

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

Contributing

Credits

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

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

License

MIT