unilife/Front/vue-unilife/src/components/MarkdownRender.vue

<template>
  <div class="markdown-body" v-html="compiledMarkdown" />
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { marked } from 'marked'
import { markedHighlight } from 'marked-highlight'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css' // 可替换为其他主题，例如 'atom-one-dark.css'

// props
const props = defineProps<{
  content: string
}>()

const compiledMarkdown = ref('')

// 配置 marked 的高亮插件
marked.use(
  markedHighlight({
    langPrefix: 'hljs language-',
    highlight(code: string, lang: string): string {
      if (lang && hljs.getLanguage(lang)) {
        return hljs.highlight(code, { language: lang }).value
      }
      return hljs.highlightAuto(code).value
    }
  })
)

// 渲染 Markdown
async function renderMarkdown() {
  compiledMarkdown.value = await marked.parse(props.content || '')
}

// 监听 props.content
watch(() => props.content, renderMarkdown, { immediate: true })
</script>

<style>
.markdown-body {
  font-size: 16px;
  line-height: 1.8;
  word-break: break-word;
  color: #1a1a1a;

  h1, h2, h3, h4 {
    font-weight: bold;
    margin: 1.2em 0 0.6em;
  }

  h1 { font-size: 1.8em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.2em; }

  a {
    color: #0366d6;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }

  code {
    background: #f6f8fa;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
  }

  pre {
    background: #f6f8fa;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
  }

  blockquote {
    border-left: 4px solid #dfe2e5;
    padding-left: 1em;
    color: #6a737d;
    margin: 1em 0;
  }

  ul, ol {
    padding-left: 2em;
    margin: 0.5em 0;
  }

  img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 0.5em 0;
  }

  table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
  }

  th, td {
    border: 1px solid #dfe2e5;
    padding: 0.6em 1em;
  }

  th {
    background-color: #f6f8fa;
  }
}
</style>