Code highlighting not working

[AniruddhaTupe]

I'm developing a code editor for Python. But I'm unable to get the syntax highlighting to work.

Following is my code -

import './App.css';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/comment/comment';
import 'codemirror/keymap/sublime';
import 'codemirror/theme/monokai.css';
import 'codemirror/theme/dracula.css';
import 'codemirror/mode/python/python.js';
import 'codemirror/mode/jsx/jsx';
import CodeMirror from '@uiw/react-codemirror';
import { useState } from 'react';

const code = "print(\"Hello\")";

function App() {
  return (
    <div className="App">
      <CodeMirror
        value={code}
        options={{
          mode: 'python',
        }}
      />
    </div>
  );
}

export default App;

And following is the output -

[jaywcjlove]

@AniruddhaTupe Example: https://codesandbox.io/embed/react-codemirror-v3-vgr4n?fontsize=14&hidenavigation=1&theme=dark

• https://github.com/uiwjs/react-codemirror/tree/v3

[jaywcjlove]

<CodeMirror
  value={code}
  options={{
+    theme: "monokai",
    mode: 'python',
  }}
/>

[AniruddhaTupe]

I copied the exact same example code, but still I can't see syntax highlighting.

Following are the sequence of npm commands I executed if that helps - npx create-react-app code-autograder npm install npm install codemirror@5 npm install @uiw/react-codemirror

Also attaching the file structure -

And attaching the output -

[AniruddhaTupe]

Ok, it's resolved now.

Had to run npm i @codemirror/lang-python

And then import it - import { python } from '@codemirror/lang-python';

And then use it - extensions={[python()]}