From 6b1a8d76e50e335f16cef8cef0da4cb00ace37ff Mon Sep 17 00:00:00 2001
From: Isaiah <isaiahjfowler@protonmail.com>
Date: Sat, 2 Dec 2023 22:17:53 -0500
Subject: [PATCH] Error handling

---
 .../markdown-viewer/markdown-viewer.service.ts   | 16 +++++++++++-----
 src/tools/markdown-viewer/markdown-viewer.vue    | 12 ++++++++----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/tools/markdown-viewer/markdown-viewer.service.ts b/src/tools/markdown-viewer/markdown-viewer.service.ts
index 0023c1e5..e06e8509 100644
--- a/src/tools/markdown-viewer/markdown-viewer.service.ts
+++ b/src/tools/markdown-viewer/markdown-viewer.service.ts
@@ -2,18 +2,24 @@ import { marked } from 'marked';
 import highlight from 'highlight.js';
 import 'highlight.js/styles/atom-one-dark.css';
 
-export { renderMarkdown };
+export { renderMarkdown }
 
-function renderMarkdown(md: string) {
+const renderMarkdown = (md: string): 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>`;
+    const highlightedCode = highlight.highlight(validLanguage, code).value;
+    return `<pre><code class="hljs ${validLanguage}">${highlightedCode}</code></pre>`;
   };
 
-  marked.use({ renderer });
+  marked.setOptions({ renderer });
 
-  return marked.parse(md);
+  try {
+    return marked(md);
+  } catch (error) {
+    console.error('Markdown parsing error:', error);
+    return `<p>Error rendering Markdown</p>`;
+  }
 }
diff --git a/src/tools/markdown-viewer/markdown-viewer.vue b/src/tools/markdown-viewer/markdown-viewer.vue
index 6df7dadc..76e8c924 100644
--- a/src/tools/markdown-viewer/markdown-viewer.vue
+++ b/src/tools/markdown-viewer/markdown-viewer.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { useElementSize, useStorage } from '@vueuse/core';
-
 import { renderMarkdown } from './markdown-viewer.service';
-
-const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
 const inputElement = ref<HTMLElement>();
+const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
 const { height } = useElementSize(inputElement);
 
+const cardStyles = computed(() => ({
+  width: '100%',
+  overflow: 'scroll',
+  maxHeight: `${height.value}px`,
+}));
+
 </script>
 
 <template>
@@ -27,6 +31,6 @@ const { height } = useElementSize(inputElement);
     />
   </n-form-item>
   <n-form-item label="Prettified version of your markdown">
-    <c-card :style="`width: 100%; overflow: scroll; max-height: ${`${height.valueOf()}px`}`" v-html="renderMarkdown(rawMd)" />
+    <c-card :style="cardStyles" v-html="renderMarkdown(rawMd)" />
   </n-form-item>
 </template>