Skip to content

Type mismatch between @blocknote/core CodeBlockOptions.createHighlighter and @blocknote/code-block Shiki bundle (@shikijs/types 3.13.0 vs 3.19.0) #2279

@ysds

Description

@ysds

Describe the bug

When integrating @blocknote/core + @blocknote/code-block with a custom Shiki bundle, the type of CodeBlockOptions["createHighlighter"] from @blocknote/core is not compatible with the createHighlighter function returned by the Shiki packages that @blocknote/code-block depends on.

Concretely:

  • @blocknote/core depends on @shikijs/types@3.13.0 and exposes:

    // node_modules/@blocknote/core/types/src/blocks/Code/block.d.ts import type { HighlighterGeneric } from "@shikijs/types"; export type CodeBlockOptions = { // ... createHighlighter?: () => Promise<HighlighterGeneric<any, any>>; };
  • @blocknote/code-block depends on Shiki packages that pull in @shikijs/types@3.19.0 (in my app this is deduped to node_modules/@shikijs/types@3.19.0).

This means:

  • CodeBlockOptions["createHighlighter"] expects a HighlighterGeneric coming from @blocknote/core/node_modules/@shikijs/types@3.13.0
  • My custom Shiki bundle returns a HighlighterGeneric coming from node_modules/@shikijs/types@3.19.0

Even though the runtime shape is compatible, TypeScript treats these as two different, incompatible types, so I have to use as any to satisfy the BlockNote API.

To Reproduce

  1. Install BlockNote core and code-block (current version):
npm install @blocknote/core@0.44.2 @blocknote/code-block@0.44.2

In the BlockNote repo, packages/core/package.json still has
"@shikijs/types": "3.13.0", while packages/code-block/package.json
pulls in Shiki packages that resolve to @shikijs/types@3.19.0 in my app.

  1. Generate a custom Shiki bundle with shiki-codegen and use it from your app

  2. Wire this highlighter into BlockNote:

    codeBlock: createCodeBlockSpec({ // Workaround: required due to @shikijs/types version mismatch createHighlighter: () => createHighlighter({ themes: ["light-plus", "dark-plus"], langs: [], }) as any, }),
  3. Run TypeScript (tsc) – you will get a type error unless you add as any to the createHighlighter call.

Misc

  • Node version: v24.12.0
  • Package manager: npm 11.6.2
  • Browser: -
  • I'm a sponsor and would appreciate if you could look into this sooner than later 💖

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions