Codemirror 主题在 webpack 中不起作用

Question

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

技术背景：Typescript、web pack。

包裹Json：

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

Web 包配置文件

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

终于，我找到了解决方案，

为了在代码镜像中使用模式：'text/html'，我需要从节点模块导入以下文件。

进口'codemirror/mode/htmlmixed/htmlmixed.js'；

Codemirror 主题在 webpack 中不起作用

Code Mirror themes is not working in web pack

typescript

webpack

codemirror

webpack-style-loader