JSPM

tiptap-extension-code-block-shiki

0.2.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 322
  • Score
    100M100P100Q97118F
  • License MIT

Use Shiki syntax highlighting for codeblocks in TipTap.

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: