Markdown documents don't open with syntax highlighting when upgrading @codemirror/view

I updated @codemirror/view from 6.7.1 to 6.11.0 and now my syntax highlighting is off. Have there been some changes in the way we apply syntax highlighting?

How do I tell Codemirror to apply syntax highlighting for markdown rather than text?

Before:

After:

Here’s my editor setup:

const editorSetup: Extension = (() => [
  highlightActiveLineGutter(),
  highlightSpecialChars(),
  history(),
  drawSelection(),
  dropCursor(),
  EditorState.allowMultipleSelections.of(true),
  indentOnInput(),
  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
  bracketMatching(),
  closeBrackets(),
  autocompletion(),
  rectangularSelection(),
  crosshairCursor(),
  highlightActiveLine(),
  highlightSelectionMatches(),
  keymap.of([
    ...closeBracketsKeymap,
    ...standardKeymap,
    ...markdownKeymap,
    ...searchKeymap,
    ...historyKeymap,
    ...completionKeymap,
    ...lintKeymap,
  ]),
  markdown({
    base: markdownLanguage,
    codeLanguages: languages,
    addKeymap: true,
  }),
])();

const startState = EditorState.create({
      doc: initialDoc,
      selection: {
        anchor: cursor,
        head: cursor,
      },
      extensions: [
        editorSetup,
      ],
    });

Updating often causes npm to duplicate packages, which breaks things. Does clearing your package lock and reinstalling node_modules fix this?

It helped! Thank you, sir.

  • Cleared my package lock file
  • Removed node_modules
  • Installed packages again

:+1: Appreciate the help.

1 Like