无法让 Codemirror HTML 语法突出显示在 Angular 2 应用程序中工作

Question

试图在我的 angular-cli (Angular 2 ) 中使 CodeMirror 的 HTML 突出显示工作（据我所知，这对某些人来说也是一个问题）申请。

这是我的：

app.component.html

<codemirror [(ngModel)]="code" [config]="config"></codemirror>
<div [innerHTML]="code"></div>

app.component.ts

export class AppComponent {
  code = `<p>My HTML</p>\n<!-- hello -->\n<p>Your HTML</p>`;

  config = {
    mode: 'htmlmixed',
    lineWrapping: false,
    lineNumbers: true,
    theme: 'monokai'
  };
}

angular-cli.json （仅列出相关部分）

"addons": [
    "../node_modules/codemirror/mode/xml/xml.js",
    "../node_modules/codemirror/mode/javascript/javascript.js",
    "../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"
],

/.../

"styles": [
    "../node_modules/codemirror/lib/codemirror.css",
    "../node_modules/codemirror/theme/monokai.css"
],

app.module.ts

imports: [
    /* ... */
    CodemirrorModule,
],

我尝试了各种语法模式，将模式作为对象或字符串传递，并且 - 如您所见 - 确保首先加载 xml。不行 - 亮点不在那里。我总是确保在每次编辑 angular-cli.json 后重新启动 ng serve。

有谁知道问题出在哪里？

Answer 1

您需要将 <script src="node_modules/codemirror/lib/codemirror.js"></script> 添加到 index.html 并且您需要导入要在您的组件中使用的 mode:

import 'codemirror/mode/htmlmixed/htmlmixed'; <-- this

export class AppComponent {
code = `<p>My HTML</p>\n<!-- hello -->\n<p>Your HTML</p>`;

config = {
  mode: 'htmlmixed',
  lineWrapping: false,
  lineNumbers: true,
  theme: 'monokai'
};
}

无法让 Codemirror HTML 语法突出显示在 Angular 2 应用程序中工作

Cannot get Codemirror HTML syntax highlighting to work in Angular 2 app

codemirror

angular