shiki-stream

使用 Shiki 进行流式高亮。适用于高亮文本流，例如大语言模型（LLM）的输出。

在线演示

用法

使用 CodeToTokenTransformStream 创建一个转换流，并通过 .pipeThrough 处理你的文本流：

import { createHighlighter, createJavaScriptRegexEngine } from 'shiki'
import { CodeToTokenTransformStream } from 'shiki-stream'

// Initialize the Shiki highlighter somewhere in your app
const highlighter = await createHighlighter({
  langs: [/* ... */],
  themes: [/* ... */],
  engine: createJavaScriptRegexEngine()
})

// The ReadableStream<string> you want to highlight
const textStream = getTextStreamFromSomewhere()

// Pipe the text stream through the token stream
const tokensStream = textStream
  .pipeThrough(new CodeToTokenTransformStream({
    highlighter,
    lang: 'javascript',
    theme: 'nord',
    allowRecalls: true, // see explanation below
  }))

allowRecalls

由于高亮可能会根据代码上下文而改变，随着流的进行，主题化的 token 也可能发生变化。因为流是单向的，我们引入了一个特殊的“回溯”token 来通知接收者丢弃最后发生变化的那些 token。

默认情况下，CodeToTokenTransformStream 仅返回稳定的 token，没有回溯。这也意味着 token 的输出粒度较粗，通常是按行输出。

对于能够处理回溯的流消费者（例如我们的 Vue / React 组件），你可以设置 allowRecalls: true 以获得更细粒度的 token。

通常，回溯应按如下方式处理：

const receivedTokens: ThemedToken[] = []

tokensStream.pipeTo(new WritableStream({
  async write(token) {
    if ('recall' in token) {
      // discard the last `token.recall` tokens
      receivedTokens.length -= token.recall
    }
    else {
      receivedTokens.push(token)
    }
  }
}))

消费 Token 流

手动

tokensStream.pipeTo(new WritableStream({
  async write(token) {
    console.log(token)
  }
}))

或者在 Node.js 中

for await (const token of tokensStream) {
  console.log(token)
}

Vue

<script setup lang="ts">
import { ShikiStreamRenderer } from 'shiki-stream/vue'

// get the token stream
</script>

<template>
  <ShikiStreamRenderer :stream="tokensStream" />
</template>

React

import { ShikiStreamRenderer } from 'shiki-stream/react'

export function MyComponent() {
  // get the token stream
  return <ShikiStreamRenderer stream={tokensStream} />
}

缓存渲染器

本库还提供了一个简化的渲染器 API，用于渲染增量更新的代码字符串。

[!NOTE] 实验性

Vue

<script setup lang="ts">
import { ShikiCachedRenderer } from 'shiki-stream/vue'

const highlighter = await createHighlighter({
  langs: [/* ... */],
  themes: [/* ... */],
  engine: createJavaScriptRegexEngine()
})

const code = ref('') // code should only be updated incrementally

// for demo purposes
onMounted(() => {
  setInterval(() => {
    code.value += '\nconsole.log("Hello, world!");'
  }, 1000)
})
</script>

<template>
  <ShikiCachedRenderer
    :highlighter="highlighter"
    :code="code"
    lang="js"
    theme="vitesse-light"
  />
</template>

React

待办事项：

赞助商

许可证

MIT 许可证 © Anthony Fu

shiki-stream 快速上手指南

shiki-stream 是一个基于 Shiki 的流式语法高亮工具，专为 LLM 输出等文本流设计，支持实时增量渲染。

环境准备

• 运行环境：Node.js (v14+)
• 开发语言：TypeScript (推荐)
• 前置依赖：无特殊系统要求，需安装 shiki 作为高亮引擎

安装步骤

由于国内网络限制，建议配置 npm 镜像源以加速下载：

npm config set registry https://registry.npmmirror.com

安装 shiki-stream 及其依赖 shiki：

npm install shiki-stream shiki

基本使用

1. 初始化与流处理

首先初始化 Shiki 高亮器，并通过 pipeThrough 将文本流转换为 Token 流：

import { createHighlighter, createJavaScriptRegexEngine } from 'shiki'
import { CodeToTokenTransformStream } from 'shiki-stream'

// 初始化 Shiki 高亮器
const highlighter = await createHighlighter({
  langs: [/* ... */],
  themes: [/* ... */],
  engine: createJavaScriptRegexEngine()
})

// 获取你的文本流
const textStream = getTextStreamFromSomewhere()

// 管道传输进行 Token 化
const tokensStream = textStream
  .pipeThrough(new CodeToTokenTransformStream({
    highlighter,
    lang: 'javascript',
    theme: 'nord',
    allowRecalls: true, // 开启后支持更细粒度的上下文召回
  }))

2. 消费 Token 流

手动消费

tokensStream.pipeTo(new WritableStream({
  async write(token) {
    console.log(token)
  }
}))

或在 Node.js 环境中：

for await (const token of tokensStream) {
  console.log(token)
}

框架集成

库提供了现成的 Vue 和 React 组件，可直接渲染流数据。

Vue 示例：

<script setup lang="ts">
import { ShikiStreamRenderer } from 'shiki-stream/vue'
</script>

<template>
  <ShikiStreamRenderer :stream="tokensStream" />
</template>

React 示例：

import { ShikiStreamRenderer } from 'shiki-stream/react'

export function MyComponent() {
  return <ShikiStreamRenderer stream={tokensStream} />
}