blob: 7f6756d763bd8e1c687ea76be0b79497726f8ba5 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
import type { CodeToHtmlOptions } from "@llm-ui/code";
import { allLangs, allLangsAlias, loadHighlighter, useCodeBlockToHtml } from "@llm-ui/code";
import { type LLMOutputComponent } from "@llm-ui/react";
import parseHtml from "html-react-parser";
import { getHighlighterCore } from "shiki/core";
import { bundledLanguagesInfo } from "shiki/langs";
// WARNING: Importing bundledThemes increases your bundle size
// see: https://llm-ui.com/docs/blocks/code#bundle-size
import { bundledThemes } from "shiki/themes";
import getWasm from "shiki/wasm";
const highlighter = loadHighlighter(
getHighlighterCore({
langs: allLangs(bundledLanguagesInfo),
langAlias: allLangsAlias(bundledLanguagesInfo),
themes: Object.values(bundledThemes),
loadWasm: getWasm,
}),
);
const codeToHtmlOptions: CodeToHtmlOptions = {
theme: "github-dark",
};
export const CodeBlock: LLMOutputComponent = ({ blockMatch }) => {
const { html, code } = useCodeBlockToHtml({
markdownCodeBlock: blockMatch.output,
highlighter,
codeToHtmlOptions,
});
if (!html) {
// fallback to <pre> if Shiki is not loaded yet
return (
<pre className="shiki">
<code>{code}</code>
</pre>
);
}
return <>{parseHtml(html)}</>;
};
|