这是一个为你准备的通用 Markdown 内容样式 CSS。它专为文章阅读优化，采用了类似“GitHub”和“Medium”的极简风格，排版清晰，非常适合博客文章（如你之前的 BlogDetail 组件）使用。

你可以直接将这段 CSS 复制到你的 Vue 组件的 <style> 标签中，或者全局样式文件中。

🎨 极简阅读风 CSS

/* Markdown 内容容器基础样式 */
.markdown-body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #24292e;
  background-color: #ffffff;
  padding: 20px;
  max-width: 900px; /* 限制最大宽度，提升阅读体验 */
  margin: 0 auto;
  box-sizing: border-box;
}

/* 标题样式 */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #1f2328;
}

.markdown-body h1 {
  font-size: 2em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-body h2 {
  font-size: 1.5em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }

/* 段落与文本 */
.markdown-body p {
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body strong {
  font-weight: 600;
  color: #24292e;
}

.markdown-body em {
  font-style: italic;
}

/* 链接样式 */
.markdown-body a {
  color: #0366d6;
  text-decoration: none;
  background-color: transparent;
}

.markdown-body a:hover {
  text-decoration: underline;
}

/* 代码块样式 */
.markdown-body code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 6px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color: #24292e;
}

.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 6px;
  margin-bottom: 16px;
}

.markdown-body pre code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
  color: #24292e;
}

/* 引用块样式 */
.markdown-body blockquote {
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
  margin: 0 0 16px 0;
}

/* 列表样式 */
.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body li {
  margin-bottom: 4px;
}

.markdown-body li > p {
  margin-top: 16px;
}

/* 表格样式 */
.markdown-body table {
  display: block;
  width: 100%;
  width: max-content;
  max-width: 100%;
  overflow: auto;
  border-spacing: 0;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.markdown-body table th,
.markdown-body table td {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

.markdown-body table tr {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

.markdown-body table tr:nth-child(2n) {
  background-color: #f6f8fa;
}

/* 图片样式 */
.markdown-body img {
  max-width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 分割线 */
.markdown-body hr {
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: #e1e4e8;
  border: 0;
}

🚀 如何在 Vue 中使用

假设你的组件结构如下，你只需要给渲染 HTML 的容器加上 class="markdown-body" 即可。

<template>
  <div class="blog-detail">
    <h1>{{ title }}</h1>
    
    <!-- 关键：在这里加上 markdown-body 类名 -->
    <div class="markdown-body" v-html="content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "我的博客文章",
      content: `<p>这是一个测试段落。<strong>加粗文字</strong> 和 <code>代码片段</code>。</p>`
    }
  }
}
</script>

<style scoped>
/* 引入上面的 CSS 代码 */
.markdown-body {
  /* ...粘贴上面的 CSS 内容... */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* ...省略其他属性... */
}
/* 注意：如果使用 scoped，可能需要使用 ::v-deep (Vue 2) 或 :deep() (Vue 3) 来穿透样式 */
</style>

💡 提示

如果你的内容是动态渲染的 HTML（使用 v-html），在 Vue 2 中如果使用了 scoped，你可能需要使用深度选择器来确保样式生效：

/* Vue 2 scoped 写法 */
<style scoped>
::v-deep .markdown-body {
  /* 样式内容 */
}
</style>