Package Exports
- tiptap-extension-code-block-shiki
- tiptap-extension-code-block-shiki/dist/tiptap-extension-code-block-shiki.cjs
- tiptap-extension-code-block-shiki/dist/tiptap-extension-code-block-shiki.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tiptap-extension-code-block-shiki) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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.
Unknown language fallback
When you use a language which isn't supported by Shiki, it silently falls back to no syntax highlighting.
Credits
Most of this library is just combining code from two other libraries: