Use Shiki syntax highlighting for codeblocks in Tiptap.
npm install shiki tiptap-extension-code-block-shikiThe 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. You may notice that the code is not highlighted for a short moment while the theme and language are loading.
If you use a language that Shiki doesn't support, it will silently switch to no syntax highlighting.
Most of this library is just a combination of code from two other libraries:
MIT