在做 chatgpt 镜像站的时候，发现有些镜像站是没做打字机的光标效果的，就
只是文字输出，是他们不想做吗？反正我想做。于是我仔细研究了一下，实现了
打字机效果加光标的效果，现在分享一下我的解决方案以及效果图
共识
首先要明确一点，chatgpt 返回的文本格式是 markdown 的，最基本的渲染方
式就是把 markdown 文本转换为 HTML 文本，然后 v-html 渲染即可。这里的
转换和代码高亮以及防 XSS 攻击用到了下面三个依赖库：
� marked 将 markdwon 转为 html
� highlight 处理代码高亮
� dompurify 防止 XSS 攻击
同时我们是可以在 markdown 中写 html 元素的，这意味着我们可以直接把光
标元素放到最后！
将 markdown 转为 html 并处理代码高亮
先贴代码
MarkdownRender.vue
<script setup>import {computed} from 'vue';import DOMPurify from 'dompurify';import
{marked} from 'marked';import hljs from
'//cdn.staticfile.org/highlight.js/11.7.0/es/highlight.min.js';import mdInCode from
"@/utils/mdInCode"; //
用于判断是否显示光标
const props = defineProps({
//
输入的
markdown
文本
text: {
type: String,
default: ""
},
//
是否需要显示光标？比如在消息流结束后是不需要显示光标的
showCursor: {
type: Boolean,
