Code Mirror themes is not working in web pack

Question

Actually, in my project, i need to show case the code snippet in highlighted version using code-mirror. But i am facing some issue with that. Please check the below information.

Technical Background : Typescript, web pack.

Package Json:

 "devDependencies": {
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0"
  }

Web Pack config file

module: {
rules: [
    {
        test: /\.css$/,
        use: [
            require.resolve('style-loader'),
            {
                loader: require.resolve('css-loader'),
                options: {
                    importLoaders: 1,
                    url: false
                },
            }
        ],
    },
]

},

Actually, css file is loaded and but theming of code-mirror is not applied

See the inspector mode

Where did i commit the mistake.

In my index.ts file i import the code mirror like below

import * as CodeMirror from 'codemirror';

import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css.js';

import './codemirror.css';
import  './gruvbox-dark.css';

Then in function module, i transferred the code-snippet using code-mirror plugins as below.

myCodeMirror = CodeMirror(html element, {
            value: code-snippet content,
            lineNumbers: false,
            mode: 'text/html'
        });

Answer 1

First, to use mode text/html, you should import codemirror/mode/xml/xml

Then, in codemirror configuration, add a theme field to enable your imported theme.

theme: 'gruvbox-dark'