代码镜像主题在Web包中不起作用

Question

实际上，在我的项目中，我需要使用代码镜像在突出显示的版本中显示代码片段。但我面临一些问题。请检查以下信息。

技术背景：打字稿，网络包。

包装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';

然后在功能模块中，我使用代码镜像插件传输了代码片段，如下所示。

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

Answer 1

首先，要使用模式text/html，您应该导入codemirror/mode/xml/xml

然后，在codemirror配置中，添加theme字段以启用导入的主题。

theme: 'gruvbox-dark'

Answer 2

最后，我找到了解决方案，

为了使用模式：＆＃39; text / html＆＃39;在代码镜像中，我需要从node-modules导入以下文件。

import＆＃39; codemirror / mode / htmlmixed / htmlmixed.js＆＃39 ;;