refactor: use Prism Node API

Use Node API from Prism instead of provided HTML script, as this
has some advantages:

- Manage Prism script depedency with npm.
- Have easier control over Prism options.
- Considerably reduce output size by not including the JS in every page,
  although for projects with very long functions this might have the
  opposite effect, as the size of the shown source increases with added HTML.

Sadly, most plugins do not work using the Node API, see
PrismJS/prism#1171.

May be revisited with `prismjs@2`.

package.json

@@ -56,6 +56,7 @@
         "handlebars": "^4.7.7",
         "lodash-es": "^4.17.21",
         "nest-commander": "^3.7.1",
+        "prismjs": "^1.29.0",
         "reflect-metadata": "^0.1.13",
         "rxjs": "^7.8.1"
     },
@@ -64,6 +65,7 @@
         "@jest/test-result": "^29.5.0",
         "@nestjs/testing": "^9.4.1",
         "@types/lodash-es": "^4.17.7",
+        "@types/prismjs": "^1.26.0",
         "prettier": "^2.8.8",
         "ts-jest": "^29.1.0",
         "ts-node": "^10.9.1",

src/crap/html-report/html-report.service.ts

@@ -1,6 +1,8 @@
 import { Injectable, Logger } from "@nestjs/common";
 import Handlebars from "handlebars";
 import { join } from "path";
+import Prism from "prismjs";
+import loadLanguages from "prismjs/components/index.js";
 import { ConfigService } from "../config.service.js";
 import { CrapFunction, CrapReport } from "../crap-report.js";
 import { FileSystemService } from "../file-system.service.js";
@@ -28,7 +30,9 @@ export class HtmlReportService {
         private readonly fileSystemService: FileSystemService,
         private readonly configService: ConfigService,
         private readonly logger: Logger,
-    ) {}
+    ) {
+        loadLanguages(["typescript"]);
+    }
 
     public async createReport(crapReport: CrapReport): Promise<void> {
         const htmlReportDir = this.configService.getHtmlReportDir();
@@ -38,7 +42,6 @@ export class HtmlReportService {
 
         await this.initHandlebars();
         const prismStyles = await this.fileSystemService.loadSourceFile(new URL("./prism/prism.css", import.meta.url));
-        const prismScript = await this.fileSystemService.loadSourceFile(new URL("./prism/prism.js", import.meta.url));
 
         const functions: FunctionReport[] = [];
         Object.entries(crapReport).forEach(([filePath, fileReport]) => {
@@ -56,9 +59,8 @@ export class HtmlReportService {
                     ...functionReport,
                     content: "function",
                     title: `CRAP: ${functionReport.functionDescriptor} - ${functionReport.filePath}`,
-                    sourceCode: this.trimStart(functionReport.sourceCode),
+                    highlightedSourceHtml: this.toHighlightedHtml(this.trimStart(functionReport.sourceCode)),
                     prismStyles,
-                    prismScript,
                 });
 
                 this.fileSystemService.writeHtmlReport(
@@ -68,7 +70,7 @@ export class HtmlReportService {
             }),
         );
 
-        const result = pageTemplate({ functions, content: "overview", title: "CRAP", prismStyles, prismScript });
+        const result = pageTemplate({ functions, content: "overview", title: "CRAP", prismStyles });
 
         await this.fileSystemService.writeHtmlReport(join(htmlReportDir, "index.html"), result, { logLevel: "log" });
     }
@@ -137,6 +139,14 @@ export class HtmlReportService {
 
         return lines.map((line) => line.slice(minSpaces)).join("\n");
     }
+
+    private toHighlightedHtml(source: string | undefined): string | undefined {
+        if (!source) {
+            return source;
+        }
+
+        return Prism.highlight(source, Prism.languages.typescript, "typescript");
+    }
 }
 
 interface FunctionReport extends CrapFunction {