cipchk / ngx-highlight-js

Angular for syntax highlighting with highlight.js
https://cipchk.github.io/ngx-highlight-js/
MIT License
25 stars 4 forks source link

How to use in Angular 16? #25

Open bakotiinii opened 1 year ago

bakotiinii commented 1 year ago

I followed the instruction but and got "Can't find hljs under window" warning in console. So what i did:

1) Add in my app.module.ts

import {HIGHLIGHTJS_CONFIG, HighlightJsConfig, HighlightJsModule} from 'ngx-highlight-js';

@NgModule({
  declarations: [
    AppComponent,
    QuestionPageComponent,
    QuestionComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HighlightJsModule,
  ],
  providers: [
    {
      provide: HIGHLIGHTJS_CONFIG,
      useValue: {
        lang: 'html'
      } as HighlightJsConfig
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2) Download css/js and create local highlight.css/highlight.js

im my component:

@Component({
  selector: 'app-question',
  templateUrl: './question.component.html',
  styleUrls: [
    './question.component.css',
    './question.component-bar.css',
    './question.component-media.css',
    './highlight.component.css'
  ]
})

in angular.json

"scripts": [
  "src/assets/highlight.js"
]

p.s. also i tried adding urls to cnd in html file.

And in component.html

<textarea highlight-js [lang]="'typescript'">
  /* tslint:disable */
  import { Component } from '@angular/core';

  @Component({
    selector: 'demo',
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.scss']
  })
  export class DemoComponent {
    switchStatus: boolean = true;
  }
  </textarea>

And no render and warning about hljs in console. Do you have any ideas?

cipchk commented 1 year ago

You also need to add in index.html:

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-dark.min.css" />
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>

Or refer to the As HTML Tags section of https://highlightjs.org/.