From 9ee0378d4e1538383a15c9e9b4240e7951f041a5 Mon Sep 17 00:00:00 2001
From: Ruby <rubyowo284@pm.me>
Date: Wed, 8 May 2024 16:32:43 +0200
Subject: [PATCH] fix(docs): hljs depcrecation and new directive

couldn't figure out how to get hljs-vue to work so this was just the
easiest way to fix it
---
 dashboard/src/components/docs/MarkdownBlock.vue | 2 +-
 dashboard/src/directives/highlightjs.ts         | 8 ++++++++
 dashboard/src/init-vue.ts                       | 3 ++-
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 dashboard/src/directives/highlightjs.ts

diff --git a/dashboard/src/components/docs/MarkdownBlock.vue b/dashboard/src/components/docs/MarkdownBlock.vue
index 14ff83b2..9da61dd2 100644
--- a/dashboard/src/components/docs/MarkdownBlock.vue
+++ b/dashboard/src/components/docs/MarkdownBlock.vue
@@ -18,7 +18,7 @@
             elem.parentNode.classList.add('codeblock');
           }
 
-          hljs.highlightBlock(elem);
+          hljs.highlightElement(elem);
         });
       }
     },
diff --git a/dashboard/src/directives/highlightjs.ts b/dashboard/src/directives/highlightjs.ts
new file mode 100644
index 00000000..85794428
--- /dev/null
+++ b/dashboard/src/directives/highlightjs.ts
@@ -0,0 +1,8 @@
+import Vue from "vue";
+import hljs from "highlight.js/lib/core";
+
+Vue.directive("highlightjs", {
+  bind(el, binding) {
+    hljs.highlightElement(el)
+  },
+});
diff --git a/dashboard/src/init-vue.ts b/dashboard/src/init-vue.ts
index d953bd37..e6705379 100644
--- a/dashboard/src/init-vue.ts
+++ b/dashboard/src/init-vue.ts
@@ -4,13 +4,14 @@ import Vue from "vue";
 
 import VueHighlightJS from "@highlightjs/vue-plugin";
 import hljs from "highlight.js/lib/core";
-import hljsYaml from "highlight.js/lib/languages/yaml.js";
+import hljsYaml from "highlight.js/lib/languages/yaml";
 import "highlight.js/styles/base16/ocean.css";
 
 import { router } from "./routes";
 import { RootStore } from "./store";
 
 import "./directives/trim-indents";
+import "./directives/highlightjs";
 
 import App from "./components/App.vue";