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

@@ -18,7 +18,7 @@
             elem.parentNode.classList.add('codeblock');
           }
 
-          hljs.highlightBlock(elem);
+          hljs.highlightElement(elem);
         });
       }
     },

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)
+  },
+});

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";