Refactored tool to use existing markdown component, added code highlighting

src/tools/markdown-viewer/markdown-viewer.service.ts

@@ -1,26 +0,0 @@
-import { marked } from 'marked';
-import highlight from 'highlight.js';
-import 'highlight.js/styles/atom-one-dark.css';
-
-export { renderMarkdown };
-
-function 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';
-    const highlightedCode = highlight.highlight(validLanguage, code).value;
-    return `<pre><code class="hljs ${validLanguage}">${highlightedCode}</code></pre>`;
-  };
-
-  marked.setOptions({ renderer });
-
-  try {
-    return marked(md);
-  }
-  catch (error) {
-    console.error('Markdown parsing error:', error);
-    return '<p>Error rendering Markdown</p>';
-  }
-}

src/tools/markdown-viewer/markdown-viewer.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
 import { useElementSize, useStorage } from '@vueuse/core';
-import { renderMarkdown } from './markdown-viewer.service';
 
 const inputElement = ref<HTMLElement>();
 const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
-const { height } = useElementSize(inputElement);
+const { height: inputElementHeight } = useElementSize(inputElement);
 
 const cardStyles = computed(() => ({
   width: '100%',
   overflow: 'scroll',
-  maxHeight: `${height.value}px`,
+  maxHeight: `${inputElementHeight.value}px`,
 }));
 </script>
 
@@ -31,6 +30,8 @@ const cardStyles = computed(() => ({
     />
   </n-form-item>
   <n-form-item label="Prettified version of your markdown">
-    <c-card :style="cardStyles" v-html="renderMarkdown(rawMd)" />
+    <c-card :style="cardStyles">
+      <c-markdown :markdown="rawMd"></c-markdown>
+    </c-card>
   </n-form-item>
 </template>

src/ui/c-markdown/c-markdown.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { marked } from 'marked';
 import DomPurify from 'dompurify';
+import highlight from "highlight.js";
+import 'highlight.js/styles/atom-one-dark.css';
 
 const props = withDefaults(defineProps<{ markdown?: string }>(), { markdown: '' });
 const { markdown } = toRefs(props);
@@ -10,6 +12,12 @@ marked.use({
     link(href, title, text) {
       return `<a class="text-primary transition decoration-none hover:underline" href="${href}" target="_blank" rel="noopener">${text}</a>`;
     },
+
+    code(code: string, infoString: string = '') {
+      const validLanguage = highlight.getLanguage(infoString) ? infoString : 'plaintext'
+      const highlightedCode = highlight.highlight(validLanguage, code).value;
+      return `<pre><code class="hljs ${validLanguage}">${highlightedCode}</code></pre>`;
+    }
   },
 });