Refactor

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

@@ -0,0 +1,20 @@
+import { marked } from "marked";
+import highlight from "highlight.js";
+import 'highlight.js/styles/atom-one-dark.css';
+
+export const renderMarkdown = (md: string) => {
+    highlight.configure({
+
+    })
+    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)
+}

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

@@ -1,24 +1,8 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core';
-import { marked } from "marked";
 const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
 const inputElement = ref<HTMLElement>();
-import highlight from "highlight.js";
+import { renderMarkdown } from "./markdown-viewer.service";
-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>