Add line numbers

Author: CodyTolene

package-lock.json

@@ -32,6 +32,7 @@
     "@angular/platform-browser": ">=12 <15",
     "@ngneat/until-destroy": "^9.2.1",
     "highlight.js": "^11.6.0",
+    "highlightjs-line-numbers.js": "^2.8.0",
     "io-ts": "^2.2.17",
     "io-ts-types": "^0.5.16"
   },

package.json

@@ -14,9 +14,20 @@ import { Component } from '@angular/core';
       <hr />
 
       <h4>FETCHED GIST (AUTO CACHED FOR 24 HOURS)</h4>
+      <p>
+        ngx-gist will fetch the gist once and store it locally for 24 hours. In
+        that timeframe if the user returns or visits another page where this
+        gist was previously loaded, it will reload the content without having to
+        reach out to GitHub again.
+      </p>
       <ngx-gist gistId="d55ea012b585a16a9970878d90106d74"></ngx-gist>
 
       <h4>FETCHED GIST (FORCED NO CACHE)</h4>
+      <p>
+        Force no cache. This will force ngx-gist to retrieve the content live
+        from GitHub every time this content loads. This is disabled by default,
+        but could be useful if your gists change frequently.
+      </p>
       <ngx-gist
         gistId="d55ea012b585a16a9970878d90106d74"
         [useCache]="false"
@@ -45,6 +56,15 @@ import { Component } from '@angular/core';
         is displayed here.
       </p>
       <ngx-gist [gist]="localGistObject"></ngx-gist>
+
+      <h4>HIDING LINE NUMBERS</h4>
+      <p>
+        Line numbers are enabled by default, but you can turn them off like so.
+      </p>
+      <ngx-gist
+        gistId="d55ea012b585a16a9970878d90106d74"
+        [showLineNumbers]="false"
+      ></ngx-gist>
     </ngx-body>
     <ngx-footer #footer></ngx-footer>
   `,

src/app/app.component.ts

@@ -13,8 +13,6 @@ export class GistFileFilterPipe implements PipeTransform {
       return [];
     }
 
-    console.log(displayOnlyFileNames);
-
     if (!displayOnlyFileNames || displayOnlyFileNames === '') {
       return files;
     }

src/app/public/ngx-gist-file-filter.pipe.ts

@@ -0,0 +1,61 @@
+import { DOCUMENT } from '@angular/common';
+import { Inject, Injectable } from '@angular/core';
+import hljs, { HLJSApi } from 'highlight.js';
+import { filter, map, Observable, firstValueFrom, from } from 'rxjs';
+
+@Injectable({ providedIn: 'root' }) // Must be a singleton
+export class NgxGistLineNumbersService {
+  public constructor(@Inject(DOCUMENT) private readonly document: Document) {}
+  private isLoaded = false;
+
+  public async load(): Promise<void> {
+    if (this.isLoaded) {
+      return;
+    }
+
+    try {
+      if (this.document.defaultView) {
+        // Ensure hljs is available before we load the dependant library
+        // `highlightjs-line-numbers.js` dynamically as a js import.
+        this.document.defaultView.hljs = hljs;
+      } else {
+        throw new Error(
+          `Unable to access default view to apply "highlight.js" package.`,
+        );
+      }
+
+      firstValueFrom(this.loadHljsLineNumbersLibrary()).then(() => {
+        // The library `highlightjs-line-numbers.js` adds new functions to the
+        // `highlight.js` scope on load, so we should now be able to call it
+        // without failure.
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.document.defaultView?.hljs?.initLineNumbersOnLoad!();
+      });
+    } catch (e: unknown) {
+      console.log(e);
+    } finally {
+      this.isLoaded = true;
+    }
+  }
+
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  private loadHljsLineNumbersLibrary(): Observable<any> {
+    return from(import('highlightjs-line-numbers.js' as any)).pipe(
+      filter((module: any) => !!module && !!module.default),
+      map((module: any) => module.default),
+    );
+  }
+  /* eslint-enable @typescript-eslint/no-explicit-any */
+}
+
+declare global {
+  interface Window {
+    hljs?: HLJSApi & {
+      /* eslint-disable @typescript-eslint/no-explicit-any */
+      initLineNumbersOnLoad?: (options?: any) => void;
+      lineNumbersBlock?: (value: Element, options?: any) => void;
+      lineNumbersValue?: (value: string, options?: any) => string;
+      /* eslint-enable @typescript-eslint/no-explicit-any */
+    };
+  }
+}

src/app/public/ngx-gist-line-numbers.service.ts

@@ -0,0 +1,37 @@
+import { Inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({ providedIn: 'root' }) // Must be a singleton
+export class NgxGistThemeService {
+  public constructor(@Inject(DOCUMENT) private readonly document: Document) {}
+
+  private importElMaterialTheme: HTMLLinkElement | null = null;
+
+  public setTheme(materialPrebuiltTheme: MaterialPrebuiltTheme): void {
+    const themeId = 'material-theme-import';
+    const currentEl = this.document.getElementById(themeId);
+
+    if (currentEl) {
+      this.document.removeChild(currentEl);
+    }
+
+    if (this.importElMaterialTheme) {
+      this.document.removeChild(this.importElMaterialTheme);
+    }
+
+    this.importElMaterialTheme = this.document.createElement('link');
+    this.importElMaterialTheme.href = `https://unpkg.com/@angular/material@14.1.0/prebuilt-themes/${materialPrebuiltTheme}.css`;
+    this.importElMaterialTheme.media = 'screen,print';
+    this.importElMaterialTheme.rel = 'stylesheet';
+    this.importElMaterialTheme.type = 'text/css';
+    this.importElMaterialTheme.id = themeId;
+
+    this.document.head.appendChild(this.importElMaterialTheme);
+  }
+}
+
+export type MaterialPrebuiltTheme =
+  | 'deeppurple-amber'
+  | 'indigo-pink'
+  | 'pink-bluegrey'
+  | 'purple-green';

src/app/public/ngx-gist-theme.service.ts

@@ -6,6 +6,12 @@ import { Language } from 'highlight.js';
 import { BehaviorSubject, filter, firstValueFrom, ReplaySubject } from 'rxjs';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { DOCUMENT } from '@angular/common';
+import { NgxGistLineNumbersService } from './ngx-gist-line-numbers.service';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import {
+  MaterialPrebuiltTheme,
+  NgxGistThemeService,
+} from './ngx-gist-theme.service';
 
 @UntilDestroy()
 @Component({
@@ -21,7 +27,13 @@ import { DOCUMENT } from '@angular/common';
           [label]="file.filename"
         >
           <pre>
-            <code [innerHTML]="file.highlightedContent"></code>
+            <code 
+              *ngIf="applyLineNumbers(file.highlightedContent) as content"
+              [innerHTML]="content"
+            ></code>
+            <ng-template #error>
+              <code>Error loading code...</code>
+            </ng-template>
           </pre>
         </mat-tab>
       </mat-tab-group>
@@ -43,14 +55,12 @@ import { DOCUMENT } from '@angular/common';
 })
 export class NgxGistComponent implements OnInit {
   public constructor(
-    @Inject(DOCUMENT)
-    private readonly document: Document,
+    @Inject(DOCUMENT) private readonly document: Document,
+    private readonly domSanitizer: DomSanitizer,
     private readonly ngxGistService: NgxGistService,
+    private readonly ngxGistLineNumbersService: NgxGistLineNumbersService,
+    private readonly ngxGistThemeService: NgxGistThemeService,
   ) {}
-
-  public codeSnippet: string | null = null;
-  private htmlLinkElement: HTMLLinkElement | null = null;
-
   /**
    * Display in the DOM only the selected filename(s) from the gists files array.
    *
@@ -122,12 +132,13 @@ export class NgxGistComponent implements OnInit {
    * Tip: See theming Angular Material: https://material.angular.io/guide/theming
    * if you need help applying a global material theme.
    */
-  @Input() public materialTheme:
-    | 'deeppurple-amber'
-    | 'indigo-pink'
-    | 'pink-bluegrey'
-    | 'purple-green'
-    | undefined = undefined;
+  @Input() public materialTheme: MaterialPrebuiltTheme | undefined = undefined;
+  /**
+   * Display or hide the line numbers in your gist code snippets.
+   *
+   * Default: `true`
+   */
+  @Input() public showLineNumbers = true;
   /**
    * Cache the GitHub gist request in local memory for 24 hours. GitHub has a
    * request limit, so this helps in reducing bandwidth. Loads previously
@@ -140,6 +151,10 @@ export class NgxGistComponent implements OnInit {
   public async ngOnInit(): Promise<void> {
     this.setTheme();
 
+    if (this.showLineNumbers) {
+      await this.ngxGistLineNumbersService.load();
+    }
+
     this.gistIdChanges
       .pipe(filter(isNonEmptyValue), untilDestroyed(this))
       .subscribe(async (gistId) => {
@@ -174,12 +189,19 @@ export class NgxGistComponent implements OnInit {
     if (!this.materialTheme) {
       return;
     }
+    this.ngxGistThemeService.setTheme(this.materialTheme);
+  }
 
-    this.htmlLinkElement = this.document.createElement('link');
-    this.htmlLinkElement.href = `https://unpkg.com/@angular/material@14.1.0/prebuilt-themes/${this.materialTheme}.css`;
-    this.htmlLinkElement.media = 'screen,print';
-    this.htmlLinkElement.rel = 'stylesheet';
-    this.htmlLinkElement.type = 'text/css';
-    this.document.head.appendChild(this.htmlLinkElement);
+  public applyLineNumbers(highlightedConent: string): SafeHtml | null {
+    if (
+      this.showLineNumbers &&
+      this.document.defaultView?.hljs &&
+      typeof this.document.defaultView.hljs.lineNumbersValue === 'function'
+    ) {
+      return this.domSanitizer.bypassSecurityTrustHtml(
+        this.document.defaultView.hljs.lineNumbersValue(highlightedConent),
+      );
+    }
+    return highlightedConent;
   }
 }

src/app/public/ngx-gist.component.ts

@@ -5,7 +5,7 @@ import {
   isNonEmptyString,
   parsedJsonFromStringCodec,
 } from './ngx-gist.utilities';
-import { default as hljs } from 'highlight.js';
+import hljs from 'highlight.js';
 
 export class NgxGist implements Gist {
   public constructor(args: Gist & Pick<NgxGist, 'languageOverride'>) {
@@ -167,11 +167,17 @@ function getHighlightedContent(
   baseContent: string,
   languageOverride?: string,
 ): string {
+  let highlighted = baseContent;
+
   if (languageOverride) {
-    return hljs.highlight(baseContent, { language: languageOverride }).value;
+    highlighted = hljs.highlight(baseContent, {
+      language: languageOverride,
+    }).value;
+  } else {
+    highlighted = hljs.highlightAuto(baseContent).value;
   }
 
-  return hljs.highlightAuto(baseContent).value;
+  return highlighted;
 }
 
 const gitHubUserCodec = io.readonly(

src/app/public/ngx-gist.model.ts

@@ -6,6 +6,8 @@ import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { GistFileFilterPipe } from './ngx-gist-file-filter.pipe';
 import { MatIconModule } from '@angular/material/icon';
+import { NgxGistLineNumbersService } from './ngx-gist-line-numbers.service';
+import { NgxGistThemeService } from './ngx-gist-theme.service';
 
 @NgModule({
   declarations: [NgxGistComponent, GistFileFilterPipe],
@@ -20,6 +22,6 @@ import { MatIconModule } from '@angular/material/icon';
     MatTabsModule,
   ],
   exports: [NgxGistComponent],
-  providers: [NgxGistService],
+  providers: [NgxGistLineNumbersService, NgxGistService, NgxGistThemeService],
 })
 export class NgxGistModule {}