fix(docs): hljs deprecations and new directive

dashboard/src/components/docs/CodeBlock.vue

@@ -1,5 +1,5 @@
 <template>
-  <pre class="codeblock" v-highlightjs><code :class="codeLang" v-trim-indents="trim"><slot></slot></code></pre>
+  <pre class="codeblock"><code :class="codeLang" v-trim-indents="trim" v-highlightjs><slot></slot></code></pre>
 </template>
 
 <script>

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,10 @@
+import hljs from "highlight.js/lib/core";
+import Vue from "vue";
+
+Vue.directive("highlightjs", {
+  bind(el, binding) {
+    if (!el.classList.contains("plain")) {
+      hljs.highlightElement(el);
+    }
+  },
+});

dashboard/src/init-vue.ts

@@ -4,12 +4,13 @@ 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/highlightjs";
 import "./directives/trim-indents";
 
 import App from "./components/App.vue";