tiptap-extension-code-block-shiki v0.4.0
Shiki Tiptap Extension
Use Shiki syntax highlighting for codeblocks in Tiptap.
Installation
npm install shiki tiptap-extension-code-block-shikiUsage
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:
License
MIT