【vue3优化】markdown-it -- markdown 转换成html

在Vue 3中，如果你需要将Markdown转换为HTML，可以使用markdown-it库。以下是一个简单的例子，展示如何在Vue 3组件中实现这一功能：

1. 安装markdown-it：

npm install markdown-it

2. 在Vue组件中使用markdown-it：

<template>
  <div v-html="htmlContent"></div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
import markdownIt from 'markdown-it';
 
export default {
  setup() {
    const htmlContent = ref('');
    const markdownItInstance = markdownIt();
 
    onMounted(() => {
      // 假设你有一个markdown变量包含Markdown文本
      const markdown = 'Some **bold** text and a [link](https://example.com)
      htmlContent.value = markdownItInstance.render(markdown);
    });
 
    return { htmlContent };
  }
};
</script>

在这个例子中，我们创建了一个markdown-it实例，并在组件加载后使用它将Markdown文本转换成HTML。然后我们通过v-html指令将转换后的HTML内容插入到模板中，这样浏览器会将其渲染为常规的HTML元素。

请注意，在实际应用中，你可能需要处理XSS安全问题，确保你的Markdown内容是安全的，避免注入攻击。在这种情况下，你可以使用过滤器或其他方法来清理Markdown内容。