Package Exports

tiptap-extension-code-block-shiki
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. You may notice that the code is not highlighted for a short moment while the theme and language are loading.

Unknown language fallback

If you use a language that Shiki doesn't support, it will silently switch to no syntax highlighting.

JSPM

tiptap-extension-code-block-shiki