CodeHighlightPlugin: CodeNode or CodeHighlightNode not regis

Error message

CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor

What it means

registerCodeHighlighting() in @lexical/code-shiki throws when the editor has not registered CodeNode and CodeHighlightNode, since Shiki-based highlighting decorates and transforms those node classes. Lexical requires every node type the code touches to be present in the editor's node config. The check runs at registration so the failure surfaces immediately rather than during a keystroke.

Source

Thrown at packages/lexical-code-shiki/src/CodeHighlighterShiki.ts:453

      $textNodeTransform.bind(null, editor, tokenizer, transformState),
    ),
  );

  return mergeRegister(...registrations);
}

/**
 * Register the Shiki tokenizer-driven highlighting on the editor along
 * with the indent / Tab / arrow-key keyboard handlers. This function
 * is provided for legacy code that has not upgraded to using
 * {@link CodeShikiExtension}.
 */
export function registerCodeHighlighting(
  editor: LexicalEditor,
  tokenizer: Tokenizer = ShikiTokenizer,
): () => void {
  if (!editor.hasNodes([CodeNode, CodeHighlightNode])) {
    throw new Error(
      'CodeHighlightPlugin: CodeNode or CodeHighlightNode not registered on editor',
    );
  }
  return mergeRegister(
    registerHighlightingOnly(editor, tokenizer),
    registerCodeIndentation(editor),
  );
}

export interface CodeShikiConfig {
  /**
   * When true, the Shiki code highlighter is not registered on the editor.
   * This signal can be flipped at runtime to enable or disable the
   * highlighter, for example to switch between the Prism and Shiki
   * highlighters without rebuilding the editor.
   */
  disabled: boolean;
  tokenizer: Tokenizer;

View on GitHub (pinned to 76a22dcba9)

Solutions

Add CodeNode and CodeHighlightNode to the editor's nodes array at creation
Register the code extension via buildEditorFromExtensions so nodes are included
Guard the call with editor.hasNodes([CodeNode, CodeHighlightNode]) and register the nodes first

Example fix

// before
const editor = createEditor({nodes: [ParagraphNode, TextNode]});
registerCodeHighlighting(editor, ShikiTokenizer); // throws

// after
import {CodeNode, CodeHighlightNode} from '@lexical/code';
const editor = createEditor({nodes: [ParagraphNode, TextNode, CodeNode, CodeHighlightNode]});
registerCodeHighlighting(editor, ShikiTokenizer); // ok

Defensive patterns

Strategy: validation

Validate before calling

import {CodeNode, CodeHighlightNode} from '@lexical/code';
if (!editor.hasNodes([CodeNode, CodeHighlightNode])) {
  throw new Error('Register CodeNode and CodeHighlightNode before Shiki highlighting');
}
registerCodeHighlighting(editor, ShikiTokenizer);

Type guard

function canUseShikiHighlighting(editor: LexicalEditor): boolean {
  return editor.hasNodes([CodeNode, CodeHighlightNode]);
}

Try / catch

try {
  const unregister = registerCodeHighlighting(editor, ShikiTokenizer);
} catch (e) {
  if (String(e).includes('not registered on editor')) {
    console.error('Shiki highlighting requires CodeNode and CodeHighlightNode', e);
  }
}

Prevention

Keep the @lexical/code node imports even when swapping tokenizer packages
Verify nodes with editor.hasNodes in your editor factory function
Register the shiki code extension instead of calling registerCodeHighlighting manually

When it happens

Trigger: Calling registerCodeHighlighting(editor, ShikiTokenizer) or mounting the Shiki CodeHighlightPlugin on an editor created without CodeNode and CodeHighlightNode in its nodes list.

Common situations: Setting up the Shiki highlighter in an editor that previously used plain text only; migrating from @lexical/code to @lexical/code-shiki and dropping the node registration; building a minimal editor with a custom nodes array that omitted code nodes.

Related errors

AI-assisted analysis of facebook/lexical@76a22dcba9 (2026-08-31). Data as JSON: /api/errors/21aca0faab5ad292. Report an issue: GitHub.