update hljs, add dedicated renderer component

Author: NiloCK

packages/vue/package.json

@@ -22,7 +22,7 @@
         "url-parse": "1.5.10"
     },
     "dependencies": {
-        "@highlightjs/vue-plugin": "^2.1.0",
+        "@highlightjs/vue-plugin": "^2.1.2",
         "@mdi/font": "^7.3.67",
         "@nilock2/pouchdb-authentication": "^1.0.2",
         "@tonaljs/tonal": "^3.6.0",

packages/vue/src/base-course/Components/CodeBlockRenderer.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="code-block-wrapper pa-2">
+    <div class="language-indicator" v-if="language">{{ language }}</div>
+    <highlightjs :language="language" :code="code" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import hljs from 'highlight.js/lib/core';
+import hljsVuePlugin from '@highlightjs/vue-plugin';
+import { getCurrentInstance } from 'vue';
+
+// Import only the languages you need
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import css from 'highlight.js/lib/languages/css';
+import html from 'highlight.js/lib/languages/xml';
+import bash from 'highlight.js/lib/languages/bash';
+import json from 'highlight.js/lib/languages/json';
+import go from 'highlight.js/lib/languages/go';
+import python from 'highlight.js/lib/languages/python';
+
+// Register languages
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('ts', typescript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('html', html);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('sh', bash);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('go', go);
+hljs.registerLanguage('golang', go);
+hljs.registerLanguage('python', python);
+
+// Get access to the current component instance
+const instance = getCurrentInstance();
+if (instance) {
+  // Register the component locally
+  instance.appContext.app.component('highlightjs', hljsVuePlugin.component);
+}
+
+const props = defineProps({
+  code: {
+    type: String,
+    required: true,
+  },
+  language: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<style>
+/* Import a highlight.js theme */
+@import 'highlight.js/styles/github.css';
+
+.code-block-wrapper {
+  margin: 1rem 0;
+  border-radius: 4px;
+  background-color: #f6f8fa;
+  overflow: auto;
+  position: relative;
+}
+
+.language-indicator {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  padding: 2px 8px;
+  font-size: 0.75rem;
+  color: #666;
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 4px;
+  z-index: 1;
+  font-family: monospace;
+  text-transform: lowercase;
+}
+</style>

yarn.lock

@@ -2228,13 +2228,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@highlightjs/vue-plugin@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "@highlightjs/vue-plugin@npm:2.1.0"
+"@highlightjs/vue-plugin@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "@highlightjs/vue-plugin@npm:2.1.2"
   peerDependencies:
     highlight.js: ^11.0.1
     vue: ^3
-  checksum: 10c0/c2f71940606319d8505c2adcc552ae57a48fb3ac19a2b495ea716ced1cc0828db17226b0912c8698f7e112cdad74b4fc9eb450f68cbd800eb91f1cced56f275b
+  checksum: 10c0/418b5142398aaf187a85e4f23f5ffaceee210b4a72678a77d841e973963e5791fc927c412153bf0cacfcdbc35e04d2b7c7eedf17d241295306e956697ae9c675
   languageName: node
   linkType: hard
 
@@ -4948,7 +4948,7 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.26.9"
     "@babel/plugin-proposal-class-static-block": "npm:^7.21.0"
-    "@highlightjs/vue-plugin": "npm:^2.1.0"
+    "@highlightjs/vue-plugin": "npm:^2.1.2"
     "@mdi/font": "npm:^7.3.67"
     "@nilock2/pouchdb-authentication": "npm:^1.0.2"
     "@testing-library/jest-dom": "npm:^6.6.3"