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 7bb211168d337844be72c43cda8515834f3de238..8c54c96d09d91a77057467b02410d3f1f5dffcbc 100644 (file)
--- 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 d2d52f4ff126d8bbd81e8b73dd00d4c8e97e0418..5b8c45466c495353c3f49026a86a9892ea1a3e7f 100644 (file)
--- 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 (file)
index 0000000..98991c3
--- /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 6f8a5d90b60410c057a35da10b011cf0b810c176..73ab6f5a894899831d49d1aa81cf291add619dee 100644 (file)
--- 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>