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

Question

Trying to get CodeMirror's HTML highlighting to work (which as I see, has been a problem to some people as well) in my angular-cli (Angular 2 ) application.

Here's what I have:

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 (listing the relevant section only)

"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,
],

I have tried various syntax patterns passing the mode as object or string, and - as you see - making sure that the xml gets loaded first. No go - the highlight is not there. I was always making sure to reboot ng serve after each edit of angular-cli.json.

Does anyone know where the problem could be buried?

Stefan Svrkota · Accepted Answer · 2016-11-07 11:33:06Z

5

You need to add <script src="node_modules/codemirror/lib/codemirror.js"></script> to index.html and you need to import mode you want to use in your component:

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'
};
}

edited Nov 7, 2016 at 11:33

answered Nov 7, 2016 at 11:19

Stefan Svrkota

50.9k10 gold badges100 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user776686 Over a year ago

Thanks. THat obviously helped. Seem like messing with the angular-cli.json is not require for js libs, just for attaching css.

Stefan Svrkota Over a year ago

@nuton Yeah, it's a bit problematic, don't know if you'll believe this, but I wasted a whole day to find out how to make highlighting work. :-)

user776686 Over a year ago

I will. This kind of time waste happens to me every other day... Now I'm struggling with font metrics and incorrect text widths when it came to styling a custome theme with a non-standard font. Don't know how long it'll take. Duh. Thanks for sharing.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related