From 4b260730a6761198205cec602d2110865a621f68 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 1 Jul 2023 03:30:53 +0800
Subject: [PATCH] Update markdown to use markdown-it and highlight js
 (highlight codeblock)

---
 components/card/MarkdownRenderer.vue |  25 +-
 composables/markdown.ts              | 131 +++++-
 package-lock.json                    | 659 +++------------------------
 package.json                         |   4 +-
 pages/notes/[id].vue                 |   7 +-
 5 files changed, 212 insertions(+), 614 deletions(-)

diff --git a/components/card/MarkdownRenderer.vue b/components/card/MarkdownRenderer.vue
index 27c3598..395cc44 100644
--- a/components/card/MarkdownRenderer.vue
+++ b/components/card/MarkdownRenderer.vue
@@ -6,7 +6,7 @@ const parsedMarkdown = computed(() => {
 </script>
 
 <template>
-    <div class="bg-secondary flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll p-4">
+    <div class="bg-secondary flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll px-12 py-4">
         <div class="h-full max-h-full w-full" v-html="parsedMarkdown">
         </div>
     </div>
@@ -14,7 +14,11 @@ const parsedMarkdown = computed(() => {
 
 <style scoped>
 :deep(*) {
-    @apply text-[#E6EDF3];
+    @apply my-4 text-[#E6EDF3];
+}
+
+:deep(h1) {
+    @apply mt-12;
 }
 
 :deep(h1),
@@ -50,11 +54,24 @@ const parsedMarkdown = computed(() => {
     @apply text-xs;
 }
 
-:deep(li input) {
+:deep(ul li),
+:deep(ol li) {
+    @apply ml-8;
+}
+
+:deep(li) {
     @apply my-0;
 }
 
+:deep(input[type='checkbox']) {
+    @apply mr-2;
+}
+
 :deep(pre) {
-    @apply bg-lightgray;
+    @apply bg-lightgray p-2;
+}
+
+:deep(blockquote) {
+    @apply border-l-4 border-l-[#E6EDF3] pl-4;
 }
 </style>
diff --git a/composables/markdown.ts b/composables/markdown.ts
index 04660b7..ae41f15 100644
--- a/composables/markdown.ts
+++ b/composables/markdown.ts
@@ -1,11 +1,130 @@
-import { micromark } from 'micromark'
-import { gfm, gfmHtml } from 'micromark-extension-gfm'
+// @ts-nocheck
+import markdown from 'markdown-it'
+import hljs from 'highlight.js'
 
-const stringToMarkdown = (string: string) => {
-    const parsedMarkdown = micromark(string, {
-        extensions: [gfm()],
-        htmlExtensions: [gfmHtml()],
+const PATTERN = /^\[(?:[\s_-])?([Xx])?\]\s(.*)/
+const ALL_BOXES = /(?:-|\*|\d+\.)\s+\[(?:[\s_-])?([Xx])?\]\s/g
+
+function taskify(
+    md,
+    { labelClass, itemClass, listClass, checkboxClass, readOnly = true } = {}
+) {
+    const checkboxAttrs = {
+        type: 'checkbox',
+        class: checkboxClass,
+        disabled: readOnly,
+    }
+    md.core.ruler.push('tasks', (state) => {
+        const allBoxes = [...state.src.matchAll(ALL_BOXES)].map(
+            (match) => match.index + match[0].indexOf('[') + 1
+        )
+        if (allBoxes.length === 0) return
+        const { Token, tokens } = state
+        let lists
+        for (let index = 0; index < tokens.length; index += 1) {
+            // Is this a checkbox?
+            if (
+                // must be an inline token
+                tokens[index].type !== 'inline' ||
+                // must have text child
+                tokens[index].children[0].type !== 'text' ||
+                // whose content matches the pattern
+                !PATTERN.test(tokens[index].children[0].content) ||
+                // whose immediate parent is a paragraph
+                tokens[index - 1]?.type !== 'paragraph_open' ||
+                // whose immediate parent's immediate parent is a list item
+                tokens[index - 2].type !== 'list_item_open'
+            ) {
+                continue
+            }
+            // Grab the first child of children, the rest should also be within the label
+            const [first, ...rest] = tokens[index].children
+            // Grab the checkmark off the text node, leave the label
+            const [checked, initLabel] = [
+                ...first.content.match(PATTERN),
+            ].slice(1)
+            tokens[index].children = [
+                // This list will be post-processed into nodes
+                // args are type, tag, nesting, attributes, content
+                // Things that are already tokens just slide right in.
+                ['label_open', 'label', 1, { class: labelClass }],
+                [
+                    'checkbox_input',
+                    'input',
+                    0,
+                    {
+                        ...checkboxAttrs,
+                        'checked': !!checked,
+                        'data-pos': allBoxes.shift(),
+                    },
+                ],
+                initLabel && ['text', '', 0, null, initLabel],
+                ...rest,
+                ['label_close', 'label', -1],
+            ]
+                .filter((a) => !!a)
+                .map((spec) =>
+                    Array.isArray(spec)
+                        ? Object.assign(new Token(...spec.slice(0, 3)), {
+                            attrs: Object.keys(spec[3] ?? {})
+                                .filter((key) => !!spec[3][key])
+                                .map((key) => [key, String(spec[3][key])]),
+                            content: spec[4],
+                        })
+                        : spec
+                )
+            if (itemClass) {
+                // index - 2 is the list item
+                tokens[index - 2].attrs = [
+                    ...(tokens[index - 2].attrs || []),
+                    ['class', itemClass],
+                ]
+            }
+            if (listClass) {
+                // locate the list item's parent list and add it to a Set for decoration
+                if (!lists) lists = new Set()
+                let cur = index - 2
+                let listLevel = tokens[cur].level - 1
+                for (; cur >= 0 && tokens[cur].level !== listLevel; cur -= 1);
+                if (cur !== -1) {
+                    lists.add(tokens[cur])
+                }
+            }
+        }
+        // Decorate all the lists we've collated.
+        if (listClass) {
+            for (const list of lists) {
+                list.attrs = [...(list.attrs || []), ['class', listClass]]
+            }
+        }
     })
+}
+
+const stringToMarkdown = (string: string) => {
+    const md = markdown({
+        highlight: (code: string, lang: string) => {
+            if (lang && hljs.getLanguage(lang)) {
+                try {
+                    return (
+                        '<pre class="hljs"><code>' +
+                        hljs.highlight(code, {
+                            language: lang,
+                            ignoreIllegals: true,
+                        }).value +
+                        '</code></pre>'
+                    )
+                } catch (__) { }
+            }
+
+            return (
+                '<pre class="hljs"><code>' +
+                md.utils.escapeHtml(code) +
+                '</code></pre>'
+            )
+        },
+    }).use(taskify)
+    const parsedMarkdown = md.render(string)
+
     return parsedMarkdown
 }
 
diff --git a/package-lock.json b/package-lock.json
index 2728557..97224c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,8 +7,8 @@
             "hasInstallScript": true,
             "dependencies": {
                 "@formkit/auto-animate": "^1.0.0-beta.6",
-                "micromark": "^3.1.0",
-                "micromark-extension-gfm": "^2.0.1",
+                "highlight.js": "^11.8.0",
+                "markdown-it": "^13.0.1",
                 "zod": "^3.21.4"
             },
             "devDependencies": {
@@ -2936,14 +2936,6 @@
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
-        "node_modules/@types/debug": {
-            "version": "4.1.7",
-            "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
-            "integrity": "sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==",
-            "dependencies": {
-                "@types/ms": "*"
-            }
-        },
         "node_modules/@types/eslint": {
             "version": "8.21.1",
             "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.21.1.tgz",
@@ -2987,11 +2979,6 @@
             "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
             "dev": true
         },
-        "node_modules/@types/ms": {
-            "version": "0.7.31",
-            "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.31.tgz",
-            "integrity": "sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA=="
-        },
         "node_modules/@types/node": {
             "version": "18.13.0",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz",
@@ -4037,8 +4024,7 @@
         "node_modules/argparse": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-            "dev": true
+            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
         },
         "node_modules/assert": {
             "version": "2.0.0",
@@ -4708,15 +4694,6 @@
                 "url": "https://github.com/chalk/chalk?sponsor=1"
             }
         },
-        "node_modules/character-entities": {
-            "version": "2.0.2",
-            "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
-            "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/wooorm"
-            }
-        },
         "node_modules/chardet": {
             "version": "0.7.0",
             "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -5470,6 +5447,7 @@
             "version": "4.3.4",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
             "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+            "dev": true,
             "dependencies": {
                 "ms": "2.1.2"
             },
@@ -5482,18 +5460,6 @@
                 }
             }
         },
-        "node_modules/decode-named-character-reference": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
-            "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
-            "dependencies": {
-                "character-entities": "^2.0.0"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/wooorm"
-            }
-        },
         "node_modules/decompress": {
             "version": "4.2.1",
             "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.1.tgz",
@@ -5944,14 +5910,6 @@
                 "node": ">= 0.8"
             }
         },
-        "node_modules/dequal": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
-            "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-            "engines": {
-                "node": ">=6"
-            }
-        },
         "node_modules/destr": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/destr/-/destr-1.2.2.tgz",
@@ -5993,6 +5951,7 @@
             "version": "5.1.0",
             "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
             "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+            "dev": true,
             "engines": {
                 "node": ">=0.3.1"
             }
@@ -7275,6 +7234,14 @@
             "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
             "dev": true
         },
+        "node_modules/highlight.js": {
+            "version": "11.8.0",
+            "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",
+            "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==",
+            "engines": {
+                "node": ">=12.0.0"
+            }
+        },
         "node_modules/hookable": {
             "version": "5.5.3",
             "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -8302,14 +8269,6 @@
                 "node": ">= 0.6"
             }
         },
-        "node_modules/kleur": {
-            "version": "4.1.5",
-            "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
-            "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
-            "engines": {
-                "node": ">=6"
-            }
-        },
         "node_modules/klona": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
@@ -8555,6 +8514,14 @@
             "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
             "dev": true
         },
+        "node_modules/linkify-it": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+            "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+            "dependencies": {
+                "uc.micro": "^1.0.1"
+            }
+        },
         "node_modules/listhen": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/listhen/-/listhen-1.0.4.tgz",
@@ -8868,12 +8835,43 @@
                 "node": ">=8"
             }
         },
+        "node_modules/markdown-it": {
+            "version": "13.0.1",
+            "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
+            "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
+            "dependencies": {
+                "argparse": "^2.0.1",
+                "entities": "~3.0.1",
+                "linkify-it": "^4.0.1",
+                "mdurl": "^1.0.1",
+                "uc.micro": "^1.0.5"
+            },
+            "bin": {
+                "markdown-it": "bin/markdown-it.js"
+            }
+        },
+        "node_modules/markdown-it/node_modules/entities": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+            "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+            "engines": {
+                "node": ">=0.12"
+            },
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
         "node_modules/mdn-data": {
             "version": "2.0.30",
             "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
             "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
             "dev": true
         },
+        "node_modules/mdurl": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+            "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+        },
         "node_modules/media-typer": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -8950,522 +8948,6 @@
                 "node": ">= 0.6"
             }
         },
-        "node_modules/micromark": {
-            "version": "3.1.0",
-            "resolved": "https://registry.npmjs.org/micromark/-/micromark-3.1.0.tgz",
-            "integrity": "sha512-6Mj0yHLdUZjHnOPgr5xfWIMqMWS12zDN6iws9SLuSz76W8jTtAv24MN4/CL7gJrl5vtxGInkkqDv/JIoRsQOvA==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "@types/debug": "^4.0.0",
-                "debug": "^4.0.0",
-                "decode-named-character-reference": "^1.0.0",
-                "micromark-core-commonmark": "^1.0.1",
-                "micromark-factory-space": "^1.0.0",
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-chunked": "^1.0.0",
-                "micromark-util-combine-extensions": "^1.0.0",
-                "micromark-util-decode-numeric-character-reference": "^1.0.0",
-                "micromark-util-encode": "^1.0.0",
-                "micromark-util-normalize-identifier": "^1.0.0",
-                "micromark-util-resolve-all": "^1.0.0",
-                "micromark-util-sanitize-uri": "^1.0.0",
-                "micromark-util-subtokenize": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.1",
-                "uvu": "^0.5.0"
-            }
-        },
-        "node_modules/micromark-core-commonmark": {
-            "version": "1.0.6",
-            "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.0.6.tgz",
-            "integrity": "sha512-K+PkJTxqjFfSNkfAhp4GB+cZPfQd6dxtTXnf+RjZOV7T4EEXnvgzOcnp+eSTmpGk9d1S9sL6/lqrgSNn/s0HZA==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "decode-named-character-reference": "^1.0.0",
-                "micromark-factory-destination": "^1.0.0",
-                "micromark-factory-label": "^1.0.0",
-                "micromark-factory-space": "^1.0.0",
-                "micromark-factory-title": "^1.0.0",
-                "micromark-factory-whitespace": "^1.0.0",
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-chunked": "^1.0.0",
-                "micromark-util-classify-character": "^1.0.0",
-                "micromark-util-html-tag-name": "^1.0.0",
-                "micromark-util-normalize-identifier": "^1.0.0",
-                "micromark-util-resolve-all": "^1.0.0",
-                "micromark-util-subtokenize": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.1",
-                "uvu": "^0.5.0"
-            }
-        },
-        "node_modules/micromark-extension-gfm": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-2.0.1.tgz",
-            "integrity": "sha512-p2sGjajLa0iYiGQdT0oelahRYtMWvLjy8J9LOCxzIQsllMCGLbsLW+Nc+N4vi02jcRJvedVJ68cjelKIO6bpDA==",
-            "dependencies": {
-                "micromark-extension-gfm-autolink-literal": "^1.0.0",
-                "micromark-extension-gfm-footnote": "^1.0.0",
-                "micromark-extension-gfm-strikethrough": "^1.0.0",
-                "micromark-extension-gfm-table": "^1.0.0",
-                "micromark-extension-gfm-tagfilter": "^1.0.0",
-                "micromark-extension-gfm-task-list-item": "^1.0.0",
-                "micromark-util-combine-extensions": "^1.0.0",
-                "micromark-util-types": "^1.0.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/unified"
-            }
-        },
-        "node_modules/micromark-extension-gfm-autolink-literal": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-1.0.3.tgz",
-            "integrity": "sha512-i3dmvU0htawfWED8aHMMAzAVp/F0Z+0bPh3YrbTPPL1v4YAlCZpy5rBO5p0LPYiZo0zFVkoYh7vDU7yQSiCMjg==",
-            "dependencies": {
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-sanitize-uri": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0",
-                "uvu": "^0.5.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/unified"
-            }
-        },
-        "node_modules/micromark-extension-gfm-footnote": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-1.0.4.tgz",
-            "integrity": "sha512-E/fmPmDqLiMUP8mLJ8NbJWJ4bTw6tS+FEQS8CcuDtZpILuOb2kjLqPEeAePF1djXROHXChM/wPJw0iS4kHCcIg==",
-            "dependencies": {
-                "micromark-core-commonmark": "^1.0.0",
-                "micromark-factory-space": "^1.0.0",
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-normalize-identifier": "^1.0.0",
-                "micromark-util-sanitize-uri": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0",
-                "uvu": "^0.5.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/unified"
-            }
-        },
-        "node_modules/micromark-extension-gfm-strikethrough": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-1.0.4.tgz",
-            "integrity": "sha512-/vjHU/lalmjZCT5xt7CcHVJGq8sYRm80z24qAKXzaHzem/xsDYb2yLL+NNVbYvmpLx3O7SYPuGL5pzusL9CLIQ==",
-            "dependencies": {
-                "micromark-util-chunked": "^1.0.0",
-                "micromark-util-classify-character": "^1.0.0",
-                "micromark-util-resolve-all": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0",
-                "uvu": "^0.5.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/unified"
-            }
-        },
-        "node_modules/micromark-extension-gfm-table": {
-            "version": "1.0.5",
-            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-1.0.5.tgz",
-            "integrity": "sha512-xAZ8J1X9W9K3JTJTUL7G6wSKhp2ZYHrFk5qJgY/4B33scJzE2kpfRL6oiw/veJTbt7jiM/1rngLlOKPWr1G+vg==",
-            "dependencies": {
-                "micromark-factory-space": "^1.0.0",
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0",
-                "uvu": "^0.5.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/unified"
-            }
-        },
-        "node_modules/micromark-extension-gfm-tagfilter": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-1.0.1.tgz",
-            "integrity": "sha512-Ty6psLAcAjboRa/UKUbbUcwjVAv5plxmpUTy2XC/3nJFL37eHej8jrHrRzkqcpipJliuBH30DTs7+3wqNcQUVA==",
-            "dependencies": {
-                "micromark-util-types": "^1.0.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/unified"
-            }
-        },
-        "node_modules/micromark-extension-gfm-task-list-item": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-1.0.3.tgz",
-            "integrity": "sha512-PpysK2S1Q/5VXi72IIapbi/jliaiOFzv7THH4amwXeYXLq3l1uo8/2Be0Ac1rEwK20MQEsGH2ltAZLNY2KI/0Q==",
-            "dependencies": {
-                "micromark-factory-space": "^1.0.0",
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0",
-                "uvu": "^0.5.0"
-            },
-            "funding": {
-                "type": "opencollective",
-                "url": "https://opencollective.com/unified"
-            }
-        },
-        "node_modules/micromark-factory-destination": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.0.0.tgz",
-            "integrity": "sha512-eUBA7Rs1/xtTVun9TmV3gjfPz2wEwgK5R5xcbIM5ZYAtvGF6JkyaDsj0agx8urXnO31tEO6Ug83iVH3tdedLnw==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-factory-label": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-1.0.2.tgz",
-            "integrity": "sha512-CTIwxlOnU7dEshXDQ+dsr2n+yxpP0+fn271pu0bwDIS8uqfFcumXpj5mLn3hSC8iw2MUr6Gx8EcKng1dD7i6hg==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0",
-                "uvu": "^0.5.0"
-            }
-        },
-        "node_modules/micromark-factory-space": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.0.0.tgz",
-            "integrity": "sha512-qUmqs4kj9a5yBnk3JMLyjtWYN6Mzfcx8uJfi5XAveBniDevmZasdGBba5b4QsvRcAkmvGo5ACmSUmyGiKTLZew==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-types": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-factory-title": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-1.0.2.tgz",
-            "integrity": "sha512-zily+Nr4yFqgMGRKLpTVsNl5L4PMu485fGFDOQJQBl2NFpjGte1e86zC0da93wf97jrc4+2G2GQudFMHn3IX+A==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-factory-space": "^1.0.0",
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0",
-                "uvu": "^0.5.0"
-            }
-        },
-        "node_modules/micromark-factory-whitespace": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-1.0.0.tgz",
-            "integrity": "sha512-Qx7uEyahU1lt1RnsECBiuEbfr9INjQTGa6Err+gF3g0Tx4YEviPbqqGKNv/NrBaE7dVHdn1bVZKM/n5I/Bak7A==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-factory-space": "^1.0.0",
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-util-character": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.1.0.tgz",
-            "integrity": "sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-util-chunked": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-1.0.0.tgz",
-            "integrity": "sha512-5e8xTis5tEZKgesfbQMKRCyzvffRRUX+lK/y+DvsMFdabAicPkkZV6gO+FEWi9RfuKKoxxPwNL+dFF0SMImc1g==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-symbol": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-util-classify-character": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-1.0.0.tgz",
-            "integrity": "sha512-F8oW2KKrQRb3vS5ud5HIqBVkCqQi224Nm55o5wYLzY/9PwHGXC01tr3d7+TqHHz6zrKQ72Okwtvm/xQm6OVNZA==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-util-combine-extensions": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.0.0.tgz",
-            "integrity": "sha512-J8H058vFBdo/6+AsjHp2NF7AJ02SZtWaVUjsayNFeAiydTxUwViQPxN0Hf8dp4FmCQi0UUFovFsEyRSUmFH3MA==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-chunked": "^1.0.0",
-                "micromark-util-types": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-util-decode-numeric-character-reference": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.0.0.tgz",
-            "integrity": "sha512-OzO9AI5VUtrTD7KSdagf4MWgHMtET17Ua1fIpXTpuhclCqD8egFWo85GxSGvxgkGS74bEahvtM0WP0HjvV0e4w==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-symbol": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-util-encode": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-1.0.1.tgz",
-            "integrity": "sha512-U2s5YdnAYexjKDel31SVMPbfi+eF8y1U4pfiRW/Y8EFVCy/vgxk/2wWTxzcqE71LHtCuCzlBDRU2a5CQ5j+mQA==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ]
-        },
-        "node_modules/micromark-util-html-tag-name": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.1.0.tgz",
-            "integrity": "sha512-BKlClMmYROy9UiV03SwNmckkjn8QHVaWkqoAqzivabvdGcwNGMMMH/5szAnywmsTBUzDsU57/mFi0sp4BQO6dA==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ]
-        },
-        "node_modules/micromark-util-normalize-identifier": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.0.0.tgz",
-            "integrity": "sha512-yg+zrL14bBTFrQ7n35CmByWUTFsgst5JhA4gJYoty4Dqzj4Z4Fr/DHekSS5aLfH9bdlfnSvKAWsAgJhIbogyBg==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-symbol": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-util-resolve-all": {
-            "version": "1.0.0",
-            "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-1.0.0.tgz",
-            "integrity": "sha512-CB/AGk98u50k42kvgaMM94wzBqozSzDDaonKU7P7jwQIuH2RU0TeBqGYJz2WY1UdihhjweivStrJ2JdkdEmcfw==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-types": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-util-sanitize-uri": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.1.0.tgz",
-            "integrity": "sha512-RoxtuSCX6sUNtxhbmsEFQfWzs8VN7cTctmBPvYivo98xb/kDEoTCtJQX5wyzIYEmk/lvNFTat4hL8oW0KndFpg==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-character": "^1.0.0",
-                "micromark-util-encode": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0"
-            }
-        },
-        "node_modules/micromark-util-subtokenize": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-1.0.2.tgz",
-            "integrity": "sha512-d90uqCnXp/cy4G881Ub4psE57Sf8YD0pim9QdjCRNjfas2M1u6Lbt+XZK9gnHL2XFhnozZiEdCa9CNfXSfQ6xA==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ],
-            "dependencies": {
-                "micromark-util-chunked": "^1.0.0",
-                "micromark-util-symbol": "^1.0.0",
-                "micromark-util-types": "^1.0.0",
-                "uvu": "^0.5.0"
-            }
-        },
-        "node_modules/micromark-util-symbol": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.0.1.tgz",
-            "integrity": "sha512-oKDEMK2u5qqAptasDAwWDXq0tG9AssVwAx3E9bBF3t/shRIGsWIRG+cGafs2p/SnDSOecnt6hZPCE2o6lHfFmQ==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ]
-        },
-        "node_modules/micromark-util-types": {
-            "version": "1.0.2",
-            "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.0.2.tgz",
-            "integrity": "sha512-DCfg/T8fcrhrRKTPjRrw/5LLvdGV7BHySf/1LOZx7TzWZdYRjogNtyNq885z3nNallwr3QUKARjqvHqX1/7t+w==",
-            "funding": [
-                {
-                    "type": "GitHub Sponsors",
-                    "url": "https://github.com/sponsors/unifiedjs"
-                },
-                {
-                    "type": "OpenCollective",
-                    "url": "https://opencollective.com/unified"
-                }
-            ]
-        },
         "node_modules/micromatch": {
             "version": "4.0.5",
             "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -9784,6 +9266,7 @@
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
             "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+            "dev": true,
             "engines": {
                 "node": ">=4"
             }
@@ -9800,7 +9283,8 @@
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+            "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+            "dev": true
         },
         "node_modules/mute-stream": {
             "version": "1.0.0",
@@ -13606,17 +13090,6 @@
                 "tslib": "^2.1.0"
             }
         },
-        "node_modules/sade": {
-            "version": "1.8.1",
-            "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
-            "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
-            "dependencies": {
-                "mri": "^1.1.0"
-            },
-            "engines": {
-                "node": ">=6"
-            }
-        },
         "node_modules/safe-buffer": {
             "version": "5.2.1",
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -14827,6 +14300,11 @@
                 "is-typedarray": "^1.0.0"
             }
         },
+        "node_modules/uc.micro": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+            "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+        },
         "node_modules/ufo": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz",
@@ -15201,23 +14679,6 @@
             "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
             "dev": true
         },
-        "node_modules/uvu": {
-            "version": "0.5.6",
-            "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
-            "integrity": "sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==",
-            "dependencies": {
-                "dequal": "^2.0.0",
-                "diff": "^5.0.0",
-                "kleur": "^4.0.3",
-                "sade": "^1.7.3"
-            },
-            "bin": {
-                "uvu": "bin.js"
-            },
-            "engines": {
-                "node": ">=8"
-            }
-        },
         "node_modules/validate-npm-package-license": {
             "version": "3.0.4",
             "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
diff --git a/package.json b/package.json
index 3f996f2..ecec6d3 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,8 @@
     },
     "dependencies": {
         "@formkit/auto-animate": "^1.0.0-beta.6",
-        "micromark": "^3.1.0",
-        "micromark-extension-gfm": "^2.0.1",
+        "highlight.js": "^11.8.0",
+        "markdown-it": "^13.0.1",
         "zod": "^3.21.4"
     }
 }
diff --git a/pages/notes/[id].vue b/pages/notes/[id].vue
index 868126d..07462c5 100644
--- a/pages/notes/[id].vue
+++ b/pages/notes/[id].vue
@@ -5,18 +5,18 @@
                 <input type="text" v-model="note.title" placeholder="untitled" @change="submit()" />
             </div>
             <div class="sticky top-0 flex w-full justify-between">
-                <div @click="toggleComp('text')" class="bg-lightgray w-1/2 p-2 text-center text-xl"
+                <div @click="toggleComp('text')" class="w-1/2 bg-lightgray p-2 text-center text-xl"
                     :class="{ 'bg-secondary': comp === 'text' }">
                     Text
                 </div>
-                <div @click="toggleComp('md')" class="bg-lightgray w-1/2 p-2 text-center text-xl"
+                <div @click="toggleComp('md')" class="w-1/2 bg-lightgray p-2 text-center text-xl"
                     :class="{ 'bg-secondary': comp === 'md' }">
                     Markdown
                 </div>
             </div>
             <div class="flex h-full w-full flex-col">
                 <textarea ref="noteTextArea" v-show="comp === 'text'"
-                    class="bg-secondary min-h-screen w-full flex-grow resize-none border-none p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
+                    class="min-h-screen w-full flex-grow resize-none border-none bg-secondary p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
                     v-model="input" @change="submit()">
 				</textarea>
                 <CardMarkdownRenderer v-show="comp === 'md'" :content="note.description" :state="'description'" />
@@ -29,6 +29,7 @@
 definePageMeta({
     middleware: ['auth'],
 })
+import 'highlight.js/styles/github-dark-dimmed.css'
 
 type Mode = 'text' | 'md'