From b14283ff64cd99840f81a2146d8e0b4c3a710a11 Mon Sep 17 00:00:00 2001
From: Isaiah <isaiahjfowler@protonmail.com>
Date: Sat, 2 Dec 2023 20:42:00 -0500
Subject: [PATCH] Added syntax highlighting

---
 package.json                                  |  2 --
 pnpm-lock.yaml                                | 22 ----------------
 src/tools/markdown-viewer/markdown-viewer.vue | 25 ++++++++++++++-----
 3 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 08f4aba9..ffa7bd4e 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,6 @@
     "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
-    "showdown": "^2.1.0",
     "sql-formatter": "^13.0.0",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",
@@ -109,7 +108,6 @@
     "@types/node": "^18.15.11",
     "@types/node-forge": "^1.3.2",
     "@types/qrcode": "^1.5.0",
-    "@types/showdown": "^2.0.6",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.0",
     "@unocss/eslint-config": "^0.57.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94b0b283..dfacabd4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,9 +134,6 @@ dependencies:
   qrcode:
     specifier: ^1.5.1
     version: 1.5.1
-  showdown:
-    specifier: ^2.1.0
-    version: 2.1.0
   sql-formatter:
     specifier: ^13.0.0
     version: 13.0.0
@@ -223,9 +220,6 @@ devDependencies:
   '@types/qrcode':
     specifier: ^1.5.0
     version: 1.5.0
-  '@types/showdown':
-    specifier: ^2.0.6
-    version: 2.0.6
   '@types/ua-parser-js':
     specifier: ^0.7.36
     version: 0.7.36
@@ -3068,10 +3062,6 @@ packages:
     resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
     dev: true
 
-  /@types/showdown@2.0.6:
-    resolution: {integrity: sha512-pTvD/0CIeqe4x23+YJWlX2gArHa8G0J0Oh6GKaVXV7TAeickpkkZiNOgFcFcmLQ5lB/K0qBJL1FtRYltBfbGCQ==}
-    dev: true
-
   /@types/throttle-debounce@2.1.0:
     resolution: {integrity: sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==}
     dev: false
@@ -4573,11 +4563,6 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
-  /commander@9.5.0:
-    resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==}
-    engines: {node: ^12.20.0 || >=14}
-    dev: false
-
   /common-tags@1.8.2:
     resolution: {integrity: sha512-gk/Z852D2Wtb//0I+kRFNKKE9dIIVirjoqPoA1wJU+XePVXZfGeBpk45+A1rKO4Q43prqWBNY/MiIeRLbPWUaA==}
     engines: {node: '>=4.0.0'}
@@ -8127,13 +8112,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /showdown@2.1.0:
-    resolution: {integrity: sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==}
-    hasBin: true
-    dependencies:
-      commander: 9.5.0
-    dev: false
-
   /side-channel@1.0.4:
     resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==}
     dependencies:
diff --git a/src/tools/markdown-viewer/markdown-viewer.vue b/src/tools/markdown-viewer/markdown-viewer.vue
index 97dede1c..fd1d2447 100644
--- a/src/tools/markdown-viewer/markdown-viewer.vue
+++ b/src/tools/markdown-viewer/markdown-viewer.vue
@@ -1,11 +1,24 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core';
-import showdown from 'showdown'
-import CCard from "@/ui/c-card/c-card.vue";
-
-const converter = new showdown.Converter()
+import { marked } from "marked";
+const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
 const inputElement = ref<HTMLElement>();
-const rawMd = useStorage('json-prettify:raw-json', '{"hello": "world", "foo": "bar"}');
+import highlight from "highlight.js";
+import 'highlight.js/styles/default.css';
+
+const renderMarkdown = (md: string) => {
+  const renderer = new marked.Renderer();
+
+  // Override the code rendering function to use highlight.js for syntax highlighting
+  renderer.code = (code: string, language: string) => {
+    const validLanguage = highlight.getLanguage(language) ? language : 'plaintext';
+    return `<pre><code class="hljs ${validLanguage}">${highlight.highlight(validLanguage, code).value}</code></pre>`;
+  };
+
+  marked.use({ renderer });
+
+  return marked.parse(md)
+}
 
 </script>
 
@@ -27,7 +40,7 @@ const rawMd = useStorage('json-prettify:raw-json', '{"hello": "world", "foo": "b
     />
   </n-form-item>
   <n-form-item label="Prettified version of your MD">
-    <c-card style="width: 100%; overflow: scroll" v-html="converter.makeHtml(rawMd)"></c-card>
+    <c-card style="width: 100%; overflow: scroll" v-html="renderMarkdown(rawMd)"></c-card>
   </n-form-item>
 </template>