ng2-codemirror icon indicating copy to clipboard operation
ng2-codemirror copied to clipboard

CodeMirror does not display colors, code, or mode

Open andrewryan1906 opened this issue 6 years ago • 2 comments

I've tried following the instructions and piecing together stuff on the forums and can't seem to get this to work. I'm running Angular 7.

My angular.json:

          "styles": [
      ..
              "node_modules/codemirror/lib/codemirror.css",
              "node_modules/codemirror/theme/darcula.css"
            ],
            "scripts": [
              "node_modules/codemirror/lib/codemirror.js",
            ]

My feature module:

@NgModule({
 imports: [
..
    CodemirrorModule,
  
  ],
  providers: [..],
  exports: []
})

My component HTML:

<codemirror formControlName="template" [config]="batchTemplateCodeMirrorConfig" style="width: 100%" [ngClass]="form.get('template').errors && form.get('template').touched ? 'is-invalid' : ''"> </codemirror>

My component ts:

import 'codemirror/mode/javascript/javascript';


@Component({
..
})
export class CodeMirrorDemo implements OnInit, OnDestroy {

 ..
  batchTemplateCodeMirrorConfig = {
    value: 'let x=x+1',
    theme: 'darcula.css',
    lineNumbers: true,
    mode: 'javascript' };

..

The line numbers display, but no theming comes through and the javascript mode isn't respected.

What am I missing? FWIW I tried including the javascript mode js in the angular.json, but I got a loading error in the Chrome console:

CodeMirror.defineMode is not a function

.. and it didn't work.

andrewryan1906 avatar Feb 19 '19 21:02 andrewryan1906

Pinging again... dead in the water, I think I'm doing something silly but would like some help.

Thanks! Andrew

andrewryan1906 avatar Feb 27 '19 15:02 andrewryan1906

https://github.com/chymz/ng2-codemirror/issues/37

Solved here

Amin020 avatar Oct 22 '20 08:10 Amin020