feat[close #19]: add support for color highlighting in codeblocks

src/core/highlight.ts

@@ -7,10 +7,23 @@ hljs.registerLanguage('bash', bash);
 hljs.registerLanguage('yaml', yaml);
 
 export default {
-  mounted(el: HTMLElement, binding: any) {
-    const code = el.innerText;
-    const highlightedCode = hljs.highlight(binding.arg, code).value;
-    el.innerHTML = highlightedCode;
-    el.classList.add('hljs');
+  install(app: any) {
+    app.mixin({
+      mounted() {
+        this.highlightCode();
+      },
+      updated() {
+        this.highlightCode();
+      },
+      methods: {
+        highlightCode() {
+          requestAnimationFrame(() => {
+            document.querySelectorAll('.language-yaml, .language-bash, pre code').forEach((block) => {
+              hljs.highlightElement(block as HTMLElement);
+            });
+          });
+        }
+      }
+    });
   }
 };

src/main.ts

@@ -12,7 +12,7 @@ const app = createApp(App);
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 
-app.directive("highlight", highlight);
+app.use(highlight);
 
 app.use(router);
 app.use(pinia);

src/views/ArticleView.vue

@@ -39,7 +39,7 @@
             </div>
         </aside>
         <div class="w-full lg:w-3/4 lg:pl-4">
-            <div class="content prose" v-html="article.Body"></div>
+            <div class="content prose article-content" v-html="article.Body"></div>
         </div>
     </div>