<script setup lang="ts"> 2 | impo-------------------------------------------------------------------------------- /playground/src/fixture.ts: -------------------------------------------------------------------------------- 1 | export const vueBefore = ` 15 | 16 | 17 |
{{ count }} * 2 = {{ doubled }}
18 | 19 | 20 | ` 26 | 27 | export const vueAfter = ` 33 | 34 | 35 |{{ count }} = {{ doubled / 2 }}
36 | 37 | 38 | ` 44 | -------------------------------------------------------------------------------- /test/output/slice-2.html: -------------------------------------------------------------------------------- 1 |import { ref } from 'vue' 2 | 3 | const-------------------------------------------------------------------------------- /src/react/utils.ts: -------------------------------------------------------------------------------- 1 | // source: https://github.com/sanity-io/use-effect-event/blob/main/src/useEffectEvent.ts 2 | import { useCallback, useInsertionEffect, useRef } from 'react' 3 | 4 | /** 5 | * This is a ponyfill of the upcoming `useEffectEvent` hook that'll arrive in React 19. 6 | * https://19.react.dev/learn/separating-events-from-effects#declaring-an-effect-event 7 | * To learn more about the ponyfill itself, see: https://blog.bitsrc.io/a-look-inside-the-useevent-polyfill-from-the-new-react-docs-d1c4739e8072 8 | * @public 9 | */ 10 | export function useEffectEvent< 11 | const T extends ( 12 | ...args: 13 | any[] 14 | ) => void, 15 | >(fn: T): T { 16 | const ref = useRef
${tokens.map(tokenToHtml).join('')}`
26 | }
27 |
28 | export function escapeHtml(html: string): string {
29 | return html.replace(//g, '>')
30 | }
31 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025-PRESENT Anthony Fu const count = ref(0) 2 | </script> 3 | 4 | <template> 5 | <button @click="count++">{{ count }}</button> 6 | </template> 7 | 8 | <style> 9 | button { 10 | color: red; 11 | } 12 | </style> 13 |-------------------------------------------------------------------------------- /test/output/merged.html: -------------------------------------------------------------------------------- 1 |
2 | <script setup lang="ts"> 3 | import { ref } from 'vue' 4 | 5 | const count = ref(0) 6 | </script> 7 | 8 | <template> 9 | <button @click="count++">{{ count }}</button> 10 | </template> 11 | 12 | <style> 13 | button { 14 | color: red; 15 | } 16 | </style> 17 |-------------------------------------------------------------------------------- /test/output/onepass.html: -------------------------------------------------------------------------------- 1 |
2 | <script setup lang="ts"> 3 | import { ref } from 'vue' 4 | 5 | const count = ref(0) 6 | </script> 7 | 8 | <template> 9 | <button @click="count++">{{ count }}</button> 10 | </template> 11 | 12 | <style> 13 | button { 14 | color: red; 15 | } 16 | </style> 17 |-------------------------------------------------------------------------------- /test/output/stream-1.html: -------------------------------------------------------------------------------- 1 |
2 | <script setup lang="ts"> 3 | import { ref } from 'vue' 4 | 5 | const count = ref(0) 6 | </script> 7 | 8 | <template> 9 | <button @click="count++">{{ count }}</button> 10 | </template> 11 | 12 | <style> 13 | button { 14 | color: red; 15 | } 16 | </style> 17 |-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # shiki-stream 2 | 3 | [![npm version][npm-version-src]][npm-version-href] 4 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 5 | [![bundle][bundle-src]][bundle-href] 6 | [![JSDocs][jsdocs-src]][jsdocs-href] 7 | [![License][license-src]][license-href] 8 | 9 | Streaming highlighting with Shiki. Useful for highlighting text streams like LLM outputs. 10 | 11 | [Live Demo](https://shiki-stream.netlify.app/) 12 | 13 | ## Usage 14 | 15 | Create a transform stream with `CodeToTokenTransformStream` and `.pipeThrough` your text stream: 16 | 17 | ```ts 18 | import { createHighlighter, createJavaScriptRegexEngine } from 'shiki' 19 | import { CodeToTokenTransformStream } from 'shiki-stream' 20 | 21 | // Initialize the Shiki highlighter somewhere in your app 22 | const highlighter = await createHighlighter({ 23 | langs: [/* ... */], 24 | themes: [/* ... */], 25 | engine: createJavaScriptRegexEngine() 26 | }) 27 | 28 | // The ReadableStream
158 |
159 | 
160 |
161 |