Fri Oct 18 16:08:00 CST 2024 inscode

package.json

@@ -8,7 +8,10 @@
   },
   "dependencies": {
     "guess": "^1.0.2",
-    "vue": "^3.2.37"
+    "highlight.js": "^11.10.0",
+    "marked": "^14.1.3",
+    "vue": "^3.2.37",
+    "vue3-markdown-it": "^1.0.10"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <div>
+    <MarkdownViewer :markdown="markdownContent" />
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+<script setup>
+import MarkdownViewer from './components/MarkdownViewer.vue';
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+const markdownContent = `# 标题
+这是一个 Markdown 示例。
+> 123
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
+\`\`\`javascript
+console.log('Hello, World!');
+\`\`\`
+`;
+</script>
\ No newline at end of file

src/components/MarkdownViewer.vue

+<template>
+  <div>
+    <vue3-markdown-it :source="markdown" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Vue3MarkdownIt from 'vue3-markdown-it';
+
+const props = defineProps({
+  markdown: {
+    type: String,
+    required: true
+  }
+});
+
+// 注册组件
+const components = {
+  Vue3MarkdownIt
+};
+</script>
+
+<style>
+/* 引入 highlight.js 的样式 */
+@import 'highlight.js/styles/atom-one-dark.css';
+</style>
\ No newline at end of file

src/components/MarkdownViewer1.vue

+<template>
+  <div v-html="compiledMarkdown"></div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { marked } from 'marked';
+import hljs from 'highlight.js';
+
+// 设置 marked 的渲染器以支持代码高亮
+const renderer = new marked.Renderer();
+renderer.code = (code, language) => {
+  return `<pre><code class="${language ? `language-${language}` : ''}">${hljs.highlightAuto(code, [language]).value}</code></pre>`;
+};
+
+marked.setOptions({
+  renderer: renderer,
+  highlight: function (code, lang) {
+    return hljs.highlightAuto(code, [lang]).value;
+  }
+});
+
+const props = defineProps({
+  markdown: {
+    type: String,
+    required: true
+  }
+});
+
+const compiledMarkdown = computed(() => {
+  try {
+    if (typeof props.markdown === 'string') {
+      return marked(props.markdown);
+    } else {
+      console.error('Invalid Markdown input:', props.markdown);
+      return '';
+    }
+  } catch (error) {
+    console.error('Error parsing Markdown:', error.name, error.message, error.stack);
+    return '<p>Failed to parse Markdown</p>';
+  }
+});
+</script>
+
+<style>
+/* 引入 highlight.js 的样式 */
+@import 'highlight.js/styles/atom-one-dark.css';
+</style>
\ No newline at end of file