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