接入deepSeek后，前端如何给“深度思考“内容单独设置样式？

问题描述：

SSE接口响应回来的数据是markdown格式，理论上来说markdown中是包含样式的，前端只需要将markdown转化为html响应到页面上即可，但是接入deepSeek后深度思考的内容只有文字描述没有样式，需要前端单独设置。

解决思路：

让后端在响应的数据流中加入标识，用来区分 “ 思考内容 ” 还是 “ 回答内容 ”，前端将“ 思考内容 ”截取出来，给 “ 思考内容 ” 加上html标签并添加行内样式生成字符串thinkingStr，然后将“ 回答内容 ”通过第三方库MarkdownIt将markdown转化为html字符串answerStr。最后将thinkingStr+answerStr=currentHTML拼接起来就生成完整且附带样式的html字符串，通过v-html将currentHTML渲染到页面即可。

实现代码：

import MarkdownIt from "markdown-it"

const md = new MarkdownIt()

const currentHTML = computed(() => {

      // 注：contentItems是在onmessage中实时接收并拼接好的字符串
      // </sy_think>是用来区分“思考内容”和“响应内容”的标识
      // md.render是将markdown转化为html

      if (contentItems.value) {
        if (contentItems.value.includes("</sy_think>")) {
          const resArr = contentItems.value.split("</sy_think>")
          const thinkingStr= `<h4> 师爷模型深度思考中...</h4> 
                              <div style="color: gray;">${resArr[0]}</div>
                             `
          return thinkingStr+ md.render(resArr[1])
        } else {
          const thinkingStr= `<h4> 师爷模型深度思考中...</h4>
                             <div style="color: gray;">${contentItems.value}</div>
                             `
          return thinkingStr
        }
      }
    })

效果对比：