
<template>
    <div v-html="renderedMarkdown"></div>
</template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue'
  import { marked } from 'marked';
  import hljs from 'highlight.js';
  import 'highlight.js/styles/github.css'; // 引入样式

  const markdownContent = ref('')

    // 计算属性，用于渲染 Markdown 内容
  const renderedMarkdown = computed(() => {
        return marked(markdownContent.value, {
            highlight: (code, lang) => {
            if (hljs.getLanguage(lang)) {
                return hljs.highlight(code, { language: lang }).value;
            } else {
                return hljs.highlightAuto(code).value;
            }
            }
        });
  });

  // 加载 Markdown 文件的方法
  const loadMarkdownFile = async () => {
        try {
            const response = await fetch('./alias.md');
            markdownContent.value = await response.text();
            console.log('linda-333', markdownContent.value)
        } catch (error) {
            console.error('Failed to load Markdown file:', error);
        }
  };

 // 组件挂载时加载 Markdown 文件
 onMounted(async () => {
    try {
        await loadMarkdownFile();
    } catch (error) {
        console.error('Failed to load Markdown file:', error);
    }
  });
  </script>
  