如何正确渲染 stream-diffs 代码块？

[seepine]

我的项目是 vue3+vite+unocss，根据文档使用 markstream-vue+stream-diffs 不确定是否缺漏了哪个步骤

部分代码如下

安装

"markstream-vue": "^1.0.7",
"stream-diffs": "^0.0.2",

main.ts

import 'markstream-vue/index.css'

chat-message.vue

<template>
  <MarkdownRender
    :content="content"
    :final="!isStreaming"
    :smooth-streaming="isStreaming ? 'auto' : false"
    :fade="!isStreaming"
    :typewriter="isStreaming"
    :max-live-nodes="isStreaming ? 0 : undefined"
    html-policy="safe"
    mode="chat"
  />
</template>

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'

const props = defineProps<{
  content: string
  isEnd?: boolean
}>()

const isStreaming = computed(() => props.isEnd !== false)
</script>

实际结果

最终渲染结果如图所示

dom 如下

预期结果

和期望的代码块渲染不同

playground如下

https://markstream-vue.simonhe.me/test#data=br:G-MCACwPeJONV1mFExhrbnVY9dAsO8lXaJK1kwFpCtakXC099wFxZ-6WbmC7sW8kWqEFTFzZ5BXRWxmRFZuc_3RqdBIFJK6X_y4b1-jadtgNGDyhFnwKFKFcc2tEj0QoA2E7ddsOP316kJlwcOiHiaUIKmFIOR5bMlacSwUi-FngoV42ZcFv1kkAewn3vPhKAnENcrwVKxAAPPoixPmnbTg9FOiDZZAWzX4IEok5ZsyMicnn8v2QA3Bzjj4eX7vr-hwvSVBQYce_39dmwLpl_fVEcyBT4Q7pJ2Z5yPnKadwAsip0hEzVXC9m5T4UQleRPJMlDMk0D00CeiWd27QQ-r_jETdwN_mXq_WSsP__mfLf6-LwjGkhDsKumAbu9YlV8vpBeMcv4lt3skJGaCo-DjWeVmRYCpmQSAJrgxeVqRjDRkz_S32IEX712Bj7scRcIjCdi6mUYqke8zU2FnDNx_2Qkpg6ALWxqZQ9jSRZoW60cbbY98M0-AtlY6oJq-_1ypsUuBk

[Simon-He95]

你现在的配置里使用了 mode="chat"。chat 模式默认会优先使用普通的

 渲染，因此即使安装了 stream-diffs，也不会自动显示 playground 里的增强代码块。

如果希望在 chat 模式下使用 stream-diffs，请显式指定 code-renderer，并打开代码块流式渲染：
<template>
  <MarkdownRender
    :content="content"
    :final="!isStreaming"
    :smooth-streaming="isStreaming ? 'auto' : false"
    :fade="!isStreaming"
    :typewriter="isStreaming"
    :max-live-nodes="isStreaming ? 0 : undefined"
    html-policy="safe"
    mode="chat"
    code-renderer="monaco"
    code-block-stream
    :render-code-blocks-as-pre="false"
  />
</template>

<script setup lang="ts">
import 'markstream-vue/index.css'
import MarkdownRender from 'markstream-vue'

const props = defineProps<{
  content: string
  isEnd?: boolean
}>()

const isStreaming = computed(() => props.isEnd !== false)
</script>

如果不需要 chat 模式的默认行为，也可以直接去掉 mode="chat"，使用默认 docs 模式；docs 模式会优先使用增强的代码块渲染。
另外，stream-diffs 的增强代码块通常会在代码块流结束（final=true）并且代码块进入可视区域后挂载；流式过程中暂时看到普通的 
 是预期行为。

相关文档：

Props：https://markstream.simonhe.me/zh/guide/props
Components / CodeBlockNode：https://markstream.simonhe.me/zh/guide/components
AI Chat Streaming：https://markstream.simonhe.me/zh/guide/ai-chat-streaming
Playground：https://markstream-vue.simonhe.me/test

[Simon-He95]

补充说明：如果你的目标只是使用 playground 里展示的 stream-diffs 增强代码块，最简单的做法是直接去掉 mode="chat"。docs 模式默认会使用增强的 stream-diffs surface：

<MarkdownRender
  :content="content"
  :final="!isStreaming"
  :smooth-streaming="isStreaming ? 'auto' : false"
  :fade="!isStreaming"
  :typewriter="isStreaming"
  :max-live-nodes="isStreaming ? 0 : undefined"
  html-policy="safe"
  code-block-stream
  :render-code-blocks-as-pre="false"
/>

只有在确实需要 chat 模式的默认渲染策略时，才保留 mode="chat"，并显式加上 code-renderer="monaco"。这里的 monaco 是历史兼容名称，实际使用的是已安装的 stream-diffs runtime，不是 Monaco Editor。

[seepine]

感谢，这样可以渲染

  <MarkdownRender
    :content="content"
    :final="!isStreaming"
    :smooth-streaming="isStreaming ? 'auto' : false"
    :fade="!isStreaming"
    :typewriter="isStreaming"
    :max-live-nodes="isStreaming ? 0 : undefined"
    html-policy="safe"
    code-block-stream
    :render-code-blocks-as-pre="false"
  />

另外 chat 模式与 dos 区别没看懂，按描述说的，我需要流式输出，是否 chat 才是合适的

[seepine]

@Simon-He95 你好再请教一下，为什么单独使用 CodeBlockNode 组件，渲染的结果和 MarkdownRender 的代码块不一样，似乎降级成使用 pre 渲染了而不是 diffs-container，是否还要什么配置

<template>
  <div>
    <CodeBlockNode
      class="chat-code-block"
      :node="codeBlockNode"
      :show-header="false"
      :is-dark="true"
      theme="github-dark"
      :monaco-options="monacoOptions"
    />
  </div>
</template>
<script setup lang="tsx">
import type { CodeBlockMonacoOptions, CodeBlockNodeProps } from 'markstream-vue'
import { CodeBlockNode } from 'markstream-vue'

type CodeBlockNode = CodeBlockNodeProps['node']

const props = defineProps<{
  text: string
  node?: Omit<CodeBlockNode, 'type' | 'code'>
}>()
const monacoOptions = {
  theme: 'github-dark',
  themes: ['github-dark', 'github-light'],
  languages: ['typescript', 'vue', 'txt'],
  MAX_HEIGHT: 400,
} satisfies CodeBlockMonacoOptions

const codeBlockNode = computed<CodeBlockNode>(() => {
  return Object.assign(
    {
      type: 'code_block',
      language: 'txt',
    } as const,
    {
      code: props.text,
      raw: props.node?.raw ?? props.text,
    },
    props.node,
  )
})
</script>

[Simon-He95]

单独使用 CodeBlockNode 时，需要自己补上 MarkdownRender 自动处理的两部分：

1. 外层使用 .markstream-vue 容器，否则库的组件样式不会完整生效。
2. 如果内容已经是最终态，显式传 :loading="false"。CodeBlockNode 默认 loading=true；在 loading 状态下会保留流式中的 pre fallback。

静态/最终态代码块可以这样写：

<script setup lang="ts">
import type { CodeBlockNodeProps } from 'markstream-vue'
import { CodeBlockNode } from 'markstream-vue'

const node = {
  type: 'code_block',
  language: 'typescript',
  code: props.text,
  raw: props.text,
} satisfies CodeBlockNodeProps['node']
</script>

<template>
  <div class="markstream-vue">
    <CodeBlockNode
      :node="node"
      :loading="false"
      :stream="false"
      :show-header="false"
      :is-dark="true"
    />
  </div>
</template>

如果是流式代码块，保持 stream=true，并把当前是否仍在输出传给 loading；流结束时一定要变为 false：

<div class="markstream-vue">
  <CodeBlockNode
    :node="node"
    :stream="true"
    :loading="isStreaming"
    :is-dark="true"
  />
</div>

其中 node.code 需要随着内容更新，isStreaming 从 true 变为 false 后，组件才会从流式 fallback 切换到 stream-diffs 的 diffs-container。还要确认已安装 stream-diffs，并导入 markstream-vue/index.css。

参考文档：https://markstream.simonhe.me/zh/guide/code-block-node
单独导出节点的 CSS 容器说明：https://markstream.simonhe.me/zh/guide/usage

[seepine]

感谢，原来如此