I have been experimenting with ngx-highlightjs and encountered an issue while trying to implement it in one of my module files. Due to having multiple modules, I am importing the HighlightModule only in the specific module where highlighting functionality is required, rather than in the 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')
}
}
}
],
})
In the component's template, the code structure is as follows:
<pre><code [highlight]="fileData" (highlighted)="onHighlight($event)"></code></pre>
However, upon implementation, I encountered the error message "Can't bind to 'highlight' since it isn't a known property of 'code'" and the output is not displaying. How can I resolve this issue?