Nuxt 评论区完美支持 Markdown：从解析、高亮到安全渲染全攻略

pnpm add -D shiki marked isomorphic-dompurify
# Nuxt UI v4 已内置 useColorMode，无需额外安装

// plugins/shiki.client.ts
import { createHighlighter } from "shiki";

export default defineNuxtPlugin(async () => {
  // 预加载文档用到的主题和语言（可根据实际需求调整）
  // 主题列表：https://shiki.zhcndoc.com/themes
  // 语言列表：https://shiki.zhcndoc.com/languages
  const highlighter = await createHighlighter({
    themes: ["material-theme-lighter", "material-theme-palenight"],
    langs: [
      "javascript",
      "typescript",
      "html",
      "css",
      "vue",
      "python",
      "bash",
      "json",
      "markdown",
      "xml",
      "yaml",
      "shell",
      "diff",
    ],
  });

  return {
    provide: {
      shiki: highlighter, // 通过 $shiki 注入全局
    },
  };
});

<template>
  <!-- eslint-disable-next-line vue/no-v-html -->
  <div v-html="renderedContent" />
</template>

<script lang="ts" setup>
import { marked } from "marked";
import DOMPurify from "isomorphic-dompurify";

const props = defineProps({ content: { type: String, required: true } });

// 从 Nuxt 插件中获取全局 Shiki 高亮器实例（已在客户端插件中预加载主题和语言）
const { $shiki } = useNuxtApp();
const colorMode = useColorMode();

const renderedContent = ref("");

// 根据当前颜色模式动态选择 Shiki 主题，确保与文档代码块配色一致
const currentTheme = computed(() => {
  return colorMode.value === "dark"
    ? "material-theme-palenight" // 深色主题
    : "material-theme-lighter"; // 浅色主题
});

// 核心渲染函数：将用户输入的 Markdown 内容转换为安全的、高亮的 HTML
const renderContent = async () => {
  // 如果 Shiki 未就绪或内容为空，则直接显示原始内容（降级处理）
  if (!$shiki || !props.content) {
    renderedContent.value = props.content;
    return;
  }

  try {
    // ---------- 第一步：手动提取并高亮所有代码块 ----------
    let processed = props.content;
    // 正则匹配围栏代码块：```lang\n代码\n```（支持语言可选）
    const codeBlockRegex = /```([a-zA-Z0-9+#-]+)\n([\s\S]*?)```/g;
    const matches = [...processed.matchAll(codeBlockRegex)];

    for (const match of matches) {
      const [fullMatch, lang, code] = match;
      try {
        // 调用 Shiki 进行语法高亮，返回 HTML 字符串或包含 HTML 的对象
        const highlighted = $shiki.codeToHtml(code.trim(), {
          lang: lang || "text", // 未指定语言时当作纯文本
          theme: currentTheme.value, // 使用当前主题
        });

        // 兼容 Shiki 不同版本的返回值（可能直接返回字符串，也可能返回 { html } 对象）
        const htmlStr =
          typeof highlighted === "string"
            ? highlighted
            : highlighted.html || highlighted.value || String(highlighted);

        // 用高亮后的 HTML 替换原始代码块（使用函数替换避免 $ 符号被转义）
        processed = processed.replace(fullMatch, () => htmlStr);
      } catch (e) {
        console.error("高亮失败:", e);
        // 高亮失败时保留原始代码块（不做高亮）
      }
    }

    // ---------- 第二步：将处理后的内容（代码块已替换）解析为 Markdown ----------
    const html = await marked.parse(processed, {
      breaks: true, // 将换行符转换为 <br>
      gfm: true, // 启用 GitHub 风格 Markdown（表格、删除线等）
    });

    // ---------- 第三步：使用 DOMPurify 过滤不安全内容，防止 XSS 攻击 ----------
    renderedContent.value = DOMPurify.sanitize(html, {
      // 明确允许的 HTML 标签（涵盖所有 Markdown 可能生成的标签）
      ALLOWED_TAGS: [
        "p",
        "br",
        "strong",
        "em",
        "u",
        "s",
        "del",
        "ins",
        "span",
        "div",
        "h1",
        "h2",
        "h3",
        "h4",
        "h5",
        "h6",
        "ul",
        "ol",
        "li",
        "a",
        "blockquote",
        "code",
        "pre",
        "table",
        "thead",
        "tbody",
        "tr",
        "th",
        "td",
        "hr",
        "img",
        "sub",
        "sup",
      ],
      // 允许的属性（class/style 用于代码高亮样式，其他为链接、图片等常用属性）
      ALLOWED_ATTR: [
        "class",
        "style",
        "href",
        "lang",
        "src",
        "alt",
        "title",
        "target",
        "rel",
      ],
      // 限制 URL 只能使用以下安全协议：
      // - http: / https: → 网页链接、图片链接（评论区核心需求）
      // - ftp: → 文件下载链接（极少出现，但保留无害）
      // - mailto: → 邮箱联系方式（偶尔有人留邮箱）
      // - tel: → 电话联系方式（虽少但保留）
      // - blob: → 临时文件/本地文件（为可能的图片上传预留）
      // - data: → base64 图片（用户直接贴 base64 图片时用）
      // 其他协议（如 javascript:、vbscript:、file: 等）一律拦截，防止 XSS 攻击
      ALLOWED_URI_REGEXP: /^(https?|ftp|mailto|tel|blob|data):/i,

      // 是否允许未在 ALLOWED_URI_REGEXP 中列出的协议：
      // - true  → 正则只作为“推荐列表”，未知协议可能被放行（不安全）
      // - false → 正则作为“强制列表”，只有列出的协议才允许（安全）
      // 评论区场景必须设置为 false，确保所有 URL 都经过协议白名单检查
      ALLOW_UNKNOWN_PROTOCOLS: false,
    });
  } catch (error) {
    console.error("渲染失败:", error);
    // 发生任何错误时，回退显示原始内容
    renderedContent.value = props.content;
  }
};

// 监听内容或主题变化，立即执行一次渲染，之后每次变化重新渲染
watch([() => props.content, () => colorMode.value], renderContent, {
  immediate: true,
});
</script>

<style scoped>
/* 样式部分见 3.5 节，此处先省略 */
</style>

<template>
  <div class="comments">
    <div v-for="comment in commentList" :key="comment.id">
      <!-- 头像、用户名等 -->
      <MarkdownRenderer :content="comment.content" />
    </div>
  </div>
</template>

<style scoped>
/* 代码块整体容器 */
:deep(pre) {
  padding: 1rem;
  background-color: var(--ui-bg-muted);  /* 不使用 !important，通过优先级覆盖 */
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  overflow-x: auto;
  margin: 1rem 0;
}

:deep(code) {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
}

/* 行内代码样式 */
:deep(code:not(pre code)) {
  background-color: var(--ui-bg-muted);
  padding: 0.2em 0.4em;
  border-radius: var(--ui-radius-sm);
}

/* 移除 Shiki 可能自带的背景，避免双重背景 */
:deep(.shiki) {
  background-color: transparent !important; /* 这里仍需 !important 覆盖 Shiki 内联样式 */
}

/* 让 .line 元素正常显示，避免布局错乱 */
:deep(pre code .line) {
  display: contents !important;
}

/* 表格样式（与文档保持一致） */
:deep(table) {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}
:deep(th), :deep(td) {
  border: 1px solid var(--ui-border);
  padding: 0.5rem;
}
:deep(th) {
  background-color: var(--ui-bg-muted);
  font-weight: 600;
}

/* 引用块 */
:deep(blockquote) {
  border-left: 4px solid var(--ui-border);
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  color: var(--ui-text-muted);
  background-color: var(--ui-bg-muted);
}

/* 列表 */
:deep(ul), :deep(ol) {
  padding-left: 2rem;
}

/* 链接 */
:deep(a) {
  color: var(--ui-primary);
  text-decoration: underline;
}
</style>

<template>
  <!-- eslint-disable-next-line vue/no-v-html -->
  <div v-html="renderedContent" />
</template>

<script lang="ts" setup>
import { marked } from "marked";
import { codeToHtml } from "shiki";
import DOMPurify from "isomorphic-dompurify";

const props = defineProps({ content: { type: String, required: true } });
const colorMode = useColorMode();
const renderedContent = ref("");

// 根据当前颜色模式动态选择 Shiki 主题，确保与文档代码块配色一致
const currentTheme = computed(() => {
  return colorMode.value === "dark"
    ? "material-theme-palenight" // 深色主题（请根据你的实际主题替换）
    : "material-theme-lighter"; // 浅色主题（请根据你的实际主题替换）
});

// 核心渲染函数：将用户输入的 Markdown 内容转换为安全的、高亮的 HTML
const renderContent = async () => {
  if (!props.content) {
    renderedContent.value = "";
    return;
  }

  try {
    // ---------- 第一步：手动提取并高亮所有代码块 ----------
    let processed = props.content;
    // 正则匹配围栏代码块：```lang\n代码\n```（支持语言可选）
    const codeBlockRegex = /```([a-zA-Z0-9+#-]+)\n([\s\S]*?)```/g;
    const matches = [...processed.matchAll(codeBlockRegex)];

    for (const match of matches) {
      const [fullMatch, lang, code] = match;
      try {
        // 调用 Shiki 进行语法高亮（懒加载，按需加载主题和语言）
        const highlighted = await codeToHtml(code.trim(), {
          lang: lang || "text", // 未指定语言时当作纯文本
          theme: currentTheme.value, // 使用当前主题
        });

        // 兼容 Shiki 不同版本的返回值（可能直接返回字符串，也可能返回 { html } 对象）
        const htmlStr =
          typeof highlighted === "string"
            ? highlighted
            : highlighted.html || highlighted.value || String(highlighted);

        // 用高亮后的 HTML 替换原始代码块（使用函数替换避免 $ 符号被转义）
        processed = processed.replace(fullMatch, () => htmlStr);
      } catch (e) {
        console.error("代码块高亮失败:", e);
        // 高亮失败时保留原始代码块（不做高亮）
      }
    }

    // ---------- 第二步：将处理后的内容（代码块已替换）解析为 Markdown ----------
    const html = await marked.parse(processed, {
      breaks: true, // 将换行符转换为 <br>
      gfm: true, // 启用 GitHub 风格 Markdown（表格、删除线等）
    });

    // ---------- 第三步：使用 DOMPurify 过滤不安全内容，防止 XSS 攻击 ----------
    renderedContent.value = DOMPurify.sanitize(html, {
      // 明确允许的 HTML 标签（涵盖所有 Markdown 可能生成的标签）
      ALLOWED_TAGS: [
        "p",
        "br",
        "strong",
        "em",
        "u",
        "s",
        "del",
        "ins",
        "span",
        "div",
        "h1",
        "h2",
        "h3",
        "h4",
        "h5",
        "h6",
        "ul",
        "ol",
        "li",
        "a",
        "blockquote",
        "code",
        "pre",
        "table",
        "thead",
        "tbody",
        "tr",
        "th",
        "td",
        "hr",
        "img",
        "sub",
        "sup",
      ],
      // 允许的属性（class/style 用于代码高亮样式，其他为链接、图片等常用属性）
      ALLOWED_ATTR: [
        "class",
        "style",
        "href",
        "lang",
        "src",
        "alt",
        "title",
        "target",
        "rel",
      ],
      // 限制 URL 只能使用以下安全协议：
      // - http: / https: → 网页链接、图片链接（评论区核心需求）
      // - ftp: → 文件下载链接（极少出现，但保留无害）
      // - mailto: → 邮箱联系方式（偶尔有人留邮箱）
      // - tel: → 电话联系方式（虽少但保留）
      // - blob: → 临时文件/本地文件（为可能的图片上传预留）
      // - data: → base64 图片（用户直接贴 base64 图片时用）
      // 其他协议（如 javascript:、vbscript:、file: 等）一律拦截，防止 XSS 攻击
      ALLOWED_URI_REGEXP: /^(https?|ftp|mailto|tel|blob|data):/i,

      // 是否允许未在 ALLOWED_URI_REGEXP 中列出的协议：
      // - true  → 正则只作为“推荐列表”，未知协议可能被放行（不安全）
      // - false → 正则作为“强制列表”，只有列出的协议才允许（安全）
      // 评论区场景必须设置为 false，确保所有 URL 都经过协议白名单检查
      ALLOW_UNKNOWN_PROTOCOLS: false,
    });
  } catch (error) {
    console.error("Markdown 渲染失败:", error);
    // 发生任何错误时，回退显示原始内容
    renderedContent.value = props.content;
  }
};

// 监听内容或主题变化，立即执行一次渲染，之后每次变化重新渲染
watch([() => props.content, () => colorMode.value], renderContent, {
  immediate: true,
});
</script>