From 4d7bb19689e519569be4353bff8e262781b525b8 Mon Sep 17 00:00:00 2001
From: mirkobrombin <send@mirko.pm>
Date: Wed, 14 Feb 2024 14:42:32 +0100
Subject: [PATCH] feat[close #19]: add support for color highlighting in
 codeblocks

---
 src/core/highlight.ts     | 23 ++++++++++++++++++-----
 src/main.ts               |  2 +-
 src/views/ArticleView.vue |  2 +-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/core/highlight.ts b/src/core/highlight.ts
index 5fb5628..dc7c340 100644
--- a/src/core/highlight.ts
+++ b/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);
+            });
+          });
+        }
+      }
+    });
   }
 };
diff --git a/src/main.ts b/src/main.ts
index 2102928..595f662 100644
--- a/src/main.ts
+++ b/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);
diff --git a/src/views/ArticleView.vue b/src/views/ArticleView.vue
index 8e4d2b5..e2e7f47 100644
--- a/src/views/ArticleView.vue
+++ b/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>