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

您需要将index.html添加到mode，并且需要导入要在组件中使用的import 'codemirror/mode/htmlmixed/htmlmixed'; <-- this export class AppComponent { code = `<p>My HTML</p>\n\n<p>Your HTML</p>`; config = { mode: 'htmlmixed', lineWrapping: false, lineNumbers: true, theme: 'monokai' }; }：

$(document).ready(function() {
  $('.leftcol').click(function() {
    $('.rightcol').removeClass('red')
                  .filter('.'+ this.className.split(" ").pop())
                  .addClass('red');

    });
});

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

1 个答案: