JavaScript Syntax highlighting not working

v6
1

Hello,

I am using codemirror 6 with basic setup and javascript language. I see keyword suggestions for javascript. However, syntax highlighting doesn’t work. Am I missing anything in the code?

import React, { useRef, useEffect } from "react";
import { keymap } from "@codemirror/view";
import { defaultKeymap, indentWithTab } from "@codemirror/commands";
import { basicSetup, EditorView } from "codemirror";
import {javascript} from "@codemirror/lang-javascript";


export const Editor = () => {
	const editor = useRef();

	useEffect(() => {
		const view = new EditorView({
			doc: "console.log('hello')\n",
			extensions: [basicSetup, javascript(), keymap.of([defaultKeymap, indentWithTab])],
			parent: editor.current
		  });
		
		return () => {
			view.destroy();
		};
	}, []);

	return <div ref={editor}></div>
};

JS syntax not highlighted
JS syntax not highlighted1376×392 19.3 KB

2

Check your dependency tree for duplicated dependencies. Clearing your package lock and reinstalling usually helps. Upgrade to a recent version of npm to avoid the issue in the future.

1 Like
3

Thank you! Deleting node_modules and running npm install fixed the highlighting issue.

4

Also seem to be having the same problem. A fresh install did not work :frowning:. Here is the code:

import { EditorView } from '@codemirror/view';
import { EditorState, Text } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';
const editorParent = document.querySelector('#editor');

async function setup() {
  new EditorView({
    state: EditorState.create({
      doc: Text.of(['no.syntax.highlighting']),
      extensions: [javascript()],
    }),
    parent: editorParent,
  });

  console.log('Editor ready');
}

setup();

Reproduction here: codemirror/lang-javascript no highlighting - StackBlitz

5

You’re not including any highlighter. Try adding basicSetup() to your extensions.

1 Like
6

Yep! worked after following and adding CodeMirror Styling Example