Темы Code Mirror не работают в веб-пакете

Question

На самом деле, в моем проекте мне нужно показать регистр кода в выделенной версии, используя code-mirror. Но я столкнулся с некоторыми проблемами с этим. Пожалуйста, проверьте информацию ниже.

Техническая информация: Typescript, веб-пакет.

Пакет Json:

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

Файл конфигурации Web Pack

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

},

На самом деле, файл CSS загружен, но тематика код-зеркала не применяется

см. Режим инспектора

Где я совершил ошибку.

В моем файле index.ts я импортирую кодовое зеркало, как показано ниже

import * as CodeMirror from 'codemirror';

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

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

Затем в функциональном модуле я передал фрагмент кода с помощью плагинов code-mirror, как показано ниже.

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

Answer 1

Наконец-то я нашел решение,

Чтобы использовать mode: 'text / html' в зеркале кода, мне нужно импортировать приведенный ниже файл из узловых модулей.

import 'codemirror / mode / htmlmixed / htmlmixed.js';

Answer 2

Во-первых, чтобы использовать режим text/html, вы должны импортировать codemirror/mode/xml/xml

Затем в конфигурации codemirror добавьте поле theme, чтобы включить импортированную тему.

theme: 'gruvbox-dark'