Angular: Sử dụng highlight.js

Trong bài viết này, mình sẽ hướng dẫn các bạn tích hợp Syntax Highlight.js vào trong dự án

Github: https://github.com/MurhafSousli/ngx-highlightjs

How to setup: https://ngx-highlight.netlify.app/

Phần setup khá đơn giản, nhưng có 1 vấn đề là linenumber package bị báo lỗi khi import

Setup Angular Highlight.js

Cài đặt ngx-highlight-js:

npm install --save ngx-highlight-js

Thêm 2 dòng sau đây vào file html của component hoặc template của dự án:

<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>

Mở file app.module.ts, thêm HighlightModel:

//....
import { HttpClientModule } from '@angular/common/http';


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

//...

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    HighlightModule,
  ],
  declarations: [AppComponent, HomeComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: <HighlightOptions>{
        lineNumbers: true,
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        lineNumbersLoader: () => import('highlightjs-line-numbers.js'),
        themePath: 'node_modules/highlight.js/styles/github.css',
        languages: {
          typescript: () => import('highlight.js/lib/languages/typescript'),
          css: () => import('highlight.js/lib/languages/css'),
          xml: () => import('highlight.js/lib/languages/xml'),
          sql: () => import('highlight.js/lib/languages/sql')
        },
      },
    },
  ],
})
export class AppModule {}

Bạn thêm thủ công ngôn ngữ mà bạn muốn hiển thị syntax highlight

Bạn sẽ gặp thông báo lỗi: "'TS7016: Could not find declaration file'"

Cách khắc phục: https://blog.atomist.com/declaration-file-fix/

 Mở file tsconfig.json, bạn thêm dòng code sau:

"noImplicitAny": false

Trường hợp bạn muốn thêm tất cả:

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

@NgModule({
  imports: [
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        fullLibraryLoader: () => import('highlight.js'),
      }
    }
  ],
})
export class AppModule { }

Sử dụng

Mở file component.ts, bạn khai báo thư viện:

import { Component } from '@angular/core';
import { HighlightAutoResult } from 'ngx-highlightjs';


@Component({
  selector: 'app-lazy-test',
  templateUrl: './lazy-test.component.html',
  styleUrls: ['./lazy-test.component.scss']
})
export class LazyTestComponent {

  code = `.wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  margin: 1em;
  position: relative;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}`;

}

Trong file html, bạn sử dụng:

<pre><code [highlight]="code" [lineNumbers]="true"></code></pre>

Tham khảo

https://stackblitz.com/edit/ngx-highlightjs-bnvwan?file=src%2Fapp%2Fapp.component.ts

https://openbase.com/js/ngx-highlight-js/documentation

https://blog.atomist.com/declaration-file-fix/

https://github.com/MurhafSousli/ngx-highlightjs