Vue项目markdown内容预览显示优化方式

pnpm add markdown-it github-markdown-css

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

<script setup lang="ts">
import { ref, watch } from 'vue'
import MarkdownIt from 'markdown-it'

interface Props {
  content: string;
}

const props = defineProps<Props>()

// 初始化 markdown-it 实例
const md = new MarkdownIt({
  html: true,    // 允许 HTML 标签
  breaks: true,  // 支持换行
  linkify: true  // 自动识别链接
})

const renderedHtml = ref('')

// 监听 content 变化，重新渲染 markdown
watch(
  () => props.content,
  (newContent) => {
    renderedHtml.value = md.render(newContent)
  },
  { immediate: true }
)
</script>

<style>
@import "github-markdown-css/github-markdown-light.css";

.markdown-body {
  padding: 20px;
  line-height: 1.7;
  font-size: 14px;
}

.markdown-body ul,
.markdown-body ol {
  margin-left: 1.2em;
  margin-bottom: 1em;
}

.markdown-body li {
  margin-bottom: 0.4em;
}

.markdown-body table {
  border-collapse: collapse;
  width: 100%;
}

.markdown-body table,
.markdown-body th,
.markdown-body td {
  border: 1px solid #d0d7de;
  padding: 8px;
}

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

<MarkdownPreview :content="renderedMarkdown" />