Fix syntax highlighting by upgrading to Shiki v3 with all languages

- Upgrade shiki from ^1.0.0 to ^3.13.0
- Use shiki/bundle/full with all bundled languages (200+)
- Change getHighlighter to createHighlighter (v3 API)
- Fix CodeBlockInline to track reactive dependencies (theme, code, language)
- Add markdown code block detection in tool call outputs
- Render tool outputs with Markdown component when they contain code blocks
- Support syntax highlighting for bash, webfetch, and default tool outputs
This commit is contained in:
Shantur Rathore
2025-10-23 21:38:16 +01:00
parent 4c98a3df06
commit 40cb17d0eb
4 changed files with 44 additions and 5 deletions

View File

@@ -1,5 +1,5 @@
import { marked } from "marked"
import { getHighlighter, type Highlighter } from "shiki"
import { createHighlighter, type Highlighter, bundledLanguages } from "shiki/bundle/full"
let highlighter: Highlighter | null = null
let highlighterPromise: Promise<Highlighter> | null = null
@@ -15,9 +15,9 @@ async function getOrCreateHighlighter() {
return highlighterPromise
}
highlighterPromise = getHighlighter({
highlighterPromise = createHighlighter({
themes: ["github-light", "github-dark"],
langs: [],
langs: Object.keys(bundledLanguages),
})
highlighter = await highlighterPromise