Can't bind to 'highlight' since it isn't a known property of 'code'

Question

I am trying to use ngx-highlightjs and I have the following code in the module file. I have multiple modules and so I am importing the HighlightModule, in the module in which the highlighting functionality is needed. So the following code is not in App Module.

import { HighlightModule, HIGHLIGHT_OPTIONS, HighlightOptions} from 'ngx-highlightjs';

@NgModule({
  declarations: [
    EnvironmentComponent,
    RepositoryComponent
  ],
  imports: [
    CommonModule,
    SharedModule,
    HighlightModule
  ],
  providers: [
    EnvironmentService,
    AuthService,
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        lineNumbersLoader: () => import('highlightjs-line-numbers.js'),
        languages: {
          typescript: () => import('highlight.js/lib/languages/typescript'),
          css: () => import('highlight.js/lib/languages/css'),
          xml: () => import('highlight.js/lib/languages/xml')
        }
      }
    }
  ],
})

and in the component template, I have the code like this :

Now I am getting the following error and the output is not showing :

Can't bind to 'highlight' since it isn't a known property of 'code'

How can I fix this ?

user_4151330 · Answer

I think problem is related to that angular doesn't see native javascript library which is highlight.js in this case. Because highlight attribute is directive defined by highlight.js

I also had same problem. And fixed the issue by following these steps.

1- I installed highlight.js manually in project directory.

npm install highlight.js

2- added following lines to scripts and styles parts in angular.json file.

    "styles":[ 
     "./node_modules/highlight.js/styles/default.css"
     ],
    "scripts": [
     "./node_modules/highlight.js/lib/highlight.js"
    ]

Can't bind to 'highlight' since it isn't a known property of 'code'

1 Answers