如何将API获取的Markdown富文本转换为HTML（Nuxt3场景）

完全可行，不需要依赖Nuxt3 Content的本地文件机制，直接用Markdown解析库即可处理混合了Markdown语法和HTML标签的文本，以下是具体实现步骤：

1. 选择并安装Markdown解析库 #

推荐两种轻量易用的方案，二选一即可：

方案一：使用marked #

npm install marked
# 或
yarn add marked

方案二：使用remark生态 #

npm install remark remark-html
# 或
yarn add remark remark-html

2. 创建转换工具函数 #

在Nuxt3项目的utils目录下创建工具文件（比如mdToHtml.js），封装转换逻辑：

marked版本实现 #

import { marked } from 'marked'

export default function mdToHtml(markdown) {
  if (!markdown) return ''
  // 配置解析规则，支持GFM语法和混合HTML标签
  marked.setOptions({
    gfm: true,
    breaks: true,
    // 注意：若API数据不可信，需开启sanitize并配置白名单防止XSS攻击
    sanitize: false
  })
  return marked(markdown)
}

remark版本实现 #

import { remark } from 'remark'
import html from 'remark-html'

export default async function mdToHtml(markdown) {
  if (!markdown) return ''
  const processedContent = await remark().use(html).process(markdown)
  return processedContent.toString()
}

3. 在组件/页面中使用 #

获取API数据后调用转换函数，再通过v-html渲染生成的HTML：

<template>
  <div class="blog-content" v-html="convertedContent"></div>
</template>

<script setup>
import mdToHtml from '~/utils/mdToHtml'
import { ref, onMounted } from 'vue'

const convertedContent = ref('')

onMounted(async () => {
  // 发起API请求获取博客数据
  const response = await fetch('你的博客API地址')
  const blogData = await response.json()
  
  // 转换description字段
  // 若使用remark的异步函数，需添加await
  convertedContent.value = mdToHtml(blogData.description)
})
</script>

<style scoped>
.blog-content h3 {
  font-size: 1.5rem;
  margin: 1rem 0;
}
.blog-content strong {
  font-weight: 700;
}
/* 可根据需求自定义生成HTML的样式 */
</style>

关键注意事项 #

• 如果API返回的内容来自不可信来源（比如用户提交），必须开启XSS防护：
  • marked中设置sanitize: true，或配合marked-sanitizer自定义允许的标签/属性
  • remark可搭配remark-sanitize插件过滤危险内容
• 生成的HTML结构需要自行通过CSS调整样式，匹配博客主题

内容的提问来源于stack exchange，提问作者Dawid