Shiki-Stream 使用教程

Shiki-Stream 使用教程

shiki-stream Streaming highlighting with Shiki. Useful for highlighting text streams like LLM outputs. 项目地址: https://gitcode.com/gh_mirrors/sh/shiki-stream

1. 项目介绍

Shiki-Stream 是一个基于 Shiki 的流式文本高亮库，适用于对文本流如大型语言模型（LLM）的输出进行高亮处理。Shiki 是一个高性能的语法高亮库，Shiki-Stream 则扩展了其功能，使其能够处理流式数据。

2. 项目快速启动

首先，确保您的环境中安装了 Node.js。接下来，按照以下步骤进行操作：

# 克隆项目
git clone https://github.com/antfu/shiki-stream.git

# 进入项目目录
cd shiki-stream

# 安装依赖
npm install

# 运行示例
node example.js

上面的步骤将会运行一个简单的示例，展示如何使用 Shiki-Stream 对文本流进行高亮处理。

3. 应用案例和最佳实践

3.1 流式高亮处理

以下是一个简单的例子，演示如何使用 Shiki-Stream 对流式数据进行高亮处理：

const { createHighlighter, createJavaScriptRegexEngine } = require('shiki');
const { CodeToTokenTransformStream } = require('shiki-stream');

// 初始化 Shiki 高亮器
const highlighter = await createHighlighter({
  langs: [], // 添加您需要支持的语言
  themes: [], // 添加您需要支持的主题
  engine: createJavaScriptRegexEngine(),
});

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

// 创建并配置 CodeToTokenTransformStream
const tokensStream = textStream.pipeThrough(
  new CodeToTokenTransformStream({
    highlighter,
    lang: 'javascript',
    theme: 'nord',
    allowRecalls: true,
  })
);

// 消费 Token 流
for await (const token of tokensStream) {
  console.log(token);
}

3.2 在 Vue 或 React 中使用

Shiki-Stream 提供了与 Vue 和 React 的集成，使得在 Web 应用中实现流式高亮变得更加容易。

Vue 示例

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

<script setup lang="ts">
import { ShikiStreamRenderer } from 'shiki-stream/vue';
// 初始化高亮器、获取文本流、创建 tokensStream 等步骤与上面类似
</script>

React 示例

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

function MyComponent() {
  // 初始化高亮器、获取文本流、创建 tokensStream 等步骤与上面类似
  return <ShikiStreamRenderer stream={tokensStream} />;
}

4. 典型生态项目

Shiki-Stream 可以与其他开源项目结合使用，例如流处理库（如 ReadableStream）、Web 应用框架（如 Vue 或 React）等，以创建更加强大和灵活的文本高亮解决方案。开发者可以根据具体需求，选择适合的生态项目进行集成。

shiki-stream Streaming highlighting with Shiki. Useful for highlighting text streams like LLM outputs. 项目地址: https://gitcode.com/gh_mirrors/sh/shiki-stream