From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 11 Jul 2025 14:20:51 +0000 (+0000)
Subject: frontend: Apply syntax highlighting to the file preview
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=37c7ad30d922aee1029e39258d8b5b0d50231058;p=pbs.git

frontend: Apply syntax highlighting to the file preview

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7bb21116..8c54c96d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,6 +13,7 @@
         "@fortawesome/vue-fontawesome": "^3.0.8",
         "axios": "^1.10.0",
         "bulma": "^1.0.4",
+        "highlight.js": "^11.11.1",
         "pinia": "^3.0.3",
         "sass-embedded": "^1.89.2",
         "vue": "^3.5.13",
@@ -2312,6 +2313,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d2d52f4f..5b8c4546 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "axios": "^1.10.0",
     "bulma": "^1.0.4",
+    "highlight.js": "^11.11.1",
     "pinia": "^3.0.3",
     "sass-embedded": "^1.89.2",
     "vue": "^3.5.13",
diff --git a/frontend/src/utils/highlight.ts b/frontend/src/utils/highlight.ts
new file mode 100644
index 00000000..98991c31
--- /dev/null
+++ b/frontend/src/utils/highlight.ts
@@ -0,0 +1,145 @@
+// Import the core component from highlight.js";
+import hljs from "highlight.js/lib/core";
+export default hljs;
+
+// Import styles for highlight.js";
+import "highlight.js/styles/github.css";
+
+// Import only the languages that we need
+import apache from "highlight.js/lib/languages/apache.js";
+hljs.registerLanguage("apache", apache);
+
+import armasm from "highlight.js/lib/languages/armasm.js";
+hljs.registerLanguage("armasm", armasm);
+
+import asciidoc from "highlight.js/lib/languages/asciidoc.js";
+hljs.registerLanguage("asciidoc", asciidoc);
+
+import awk from "highlight.js/lib/languages/awk.js";
+hljs.registerLanguage("awk", awk);
+
+import bash from "highlight.js/lib/languages/bash.js";
+hljs.registerLanguage("bash", bash);
+
+import c from "highlight.js/lib/languages/c.js";
+hljs.registerLanguage("c", c);
+
+import cmake from "highlight.js/lib/languages/cmake.js";
+hljs.registerLanguage("cmake", cmake);
+
+import cpp from "highlight.js/lib/languages/cpp.js";
+hljs.registerLanguage("cpp", cpp);
+
+import csharp from "highlight.js/lib/languages/csharp.js";
+hljs.registerLanguage("csharp", csharp);
+
+import css from "highlight.js/lib/languages/css.js";
+hljs.registerLanguage("css", css);
+
+import diff from "highlight.js/lib/languages/diff.js";
+hljs.registerLanguage("diff", diff);
+
+import dockerfile from "highlight.js/lib/languages/dockerfile.js";
+hljs.registerLanguage("dockerfile", dockerfile);
+
+import fortran from "highlight.js/lib/languages/fortran.js";
+hljs.registerLanguage("fortran", fortran);
+
+import go from "highlight.js/lib/languages/go.js";
+hljs.registerLanguage("go", go);
+
+import groovy from "highlight.js/lib/languages/groovy.js";
+hljs.registerLanguage("groovy", groovy);
+
+import http from "highlight.js/lib/languages/http.js";
+hljs.registerLanguage("http", http);
+
+import ini from "highlight.js/lib/languages/ini.js";
+hljs.registerLanguage("ini", ini);
+
+import java from "highlight.js/lib/languages/java.js";
+hljs.registerLanguage("java", java);
+
+import javascript from "highlight.js/lib/languages/javascript.js";
+hljs.registerLanguage("javascript", javascript);
+
+import json from "highlight.js/lib/languages/json.js";
+hljs.registerLanguage("json", json);
+
+import latex from "highlight.js/lib/languages/latex.js";
+hljs.registerLanguage("latex", latex);
+
+import ldif from "highlight.js/lib/languages/ldif.js";
+hljs.registerLanguage("ldif", ldif);
+
+import llvm from "highlight.js/lib/languages/llvm.js";
+hljs.registerLanguage("llvm", llvm);
+
+import lua from "highlight.js/lib/languages/lua.js";
+hljs.registerLanguage("lua", lua);
+
+import makefile from "highlight.js/lib/languages/makefile.js";
+hljs.registerLanguage("makefile", makefile);
+
+import markdown from "highlight.js/lib/languages/markdown.js";
+hljs.registerLanguage("markdown", markdown);
+
+import perl from "highlight.js/lib/languages/perl.js";
+hljs.registerLanguage("perl", perl);
+
+import pgsql from "highlight.js/lib/languages/pgsql.js";
+hljs.registerLanguage("pgsql", pgsql);
+
+import php from "highlight.js/lib/languages/php.js";
+hljs.registerLanguage("php", php);
+
+import plaintext from "highlight.js/lib/languages/plaintext.js";
+hljs.registerLanguage("plaintext", plaintext);
+
+import properties from "highlight.js/lib/languages/properties.js";
+hljs.registerLanguage("properties", properties);
+
+import protobuf from "highlight.js/lib/languages/protobuf.js";
+hljs.registerLanguage("protobuf", protobuf);
+
+import python from "highlight.js/lib/languages/python.js";
+hljs.registerLanguage("python", python);
+
+import ruby from "highlight.js/lib/languages/ruby.js";
+hljs.registerLanguage("ruby", ruby);
+
+import rust from "highlight.js/lib/languages/rust.js";
+hljs.registerLanguage("rust", rust);
+
+import scss from "highlight.js/lib/languages/scss.js";
+hljs.registerLanguage("scss", scss);
+
+import shell from "highlight.js/lib/languages/shell.js";
+hljs.registerLanguage("shell", shell);
+
+import sql from "highlight.js/lib/languages/sql.js";
+hljs.registerLanguage("sql", sql);
+
+import tcl from "highlight.js/lib/languages/tcl.js";
+hljs.registerLanguage("tcl", tcl);
+
+import typescript from "highlight.js/lib/languages/typescript.js";
+hljs.registerLanguage("typescript", typescript);
+
+import vala from "highlight.js/lib/languages/vala.js";
+hljs.registerLanguage("vala", vala);
+
+import vim from "highlight.js/lib/languages/vim.js";
+hljs.registerLanguage("vim", vim);
+
+import wasm from "highlight.js/lib/languages/wasm.js";
+hljs.registerLanguage("wasm", wasm);
+
+import x86asm from "highlight.js/lib/languages/x86asm.js";
+hljs.registerLanguage("x86asm", x86asm);
+
+import xml from "highlight.js/lib/languages/xml.js";
+hljs.registerLanguage("xml", xml);
+
+import yaml from "highlight.js/lib/languages/yaml.js";
+hljs.registerLanguage("yaml", yaml);
diff --git a/frontend/src/views/PackageFileView.vue b/frontend/src/views/PackageFileView.vue
index 6f8a5d90..73ab6f5a 100644
--- a/frontend/src/views/PackageFileView.vue
+++ b/frontend/src/views/PackageFileView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-	import { ref, onMounted } from "vue";
+	import { ref, onMounted, watch, nextTick } from "vue";
+	import hljs from "@/utils/highlight";
 
 	// Fetch the package UUID and path from the URL
 	const { uuid, path } = defineProps<{
@@ -11,6 +12,7 @@
 	import { usePackage } from "@/composables/packages";
 	const { pkg, loadPackage, getPackageFilePayload } = usePackage(uuid);
 
+	const highlight = ref<HTMLElement | null>(null);
 	const content = ref("");
 	const loading = ref(true);
 	const error = ref<Error | null>(null);
@@ -27,6 +29,17 @@
 			loading.value = false;
 		}
 	});
+
+	// Highlight whenever content is changing
+	watch(content, async () => {
+		// Wait until the DOM is fully rendered and only then start highlighting
+		await nextTick();
+
+		// Highlight the code
+		if (highlight.value) {
+			hljs.highlightElement(highlight.value);
+		}
+	})
 </script>
 
 <template>
@@ -39,7 +52,7 @@
 			</Notification>
 
 			<div v-else>
-				<pre v-text="content" />
+				<pre><code ref="highlight">{{ content }}</code></pre>
 			</div>
 		</Container>
 	</Section>