code-server

1import {
2  transformerNotationDiff,
3  transformerNotationErrorLevel,
4  transformerNotationFocus,
5  transformerNotationHighlight,
6  transformerNotationWordHighlight,
7} from '@shikijs/transformers';
8import type { HTMLAttributes } from 'react';
9import {
10  type BundledLanguage,
11  type CodeOptionsMultipleThemes,
12  codeToHtml,
13} from 'shiki';
14 
15export type CodeBlockContentProps = HTMLAttributes<HTMLDivElement> & {
16  themes?: CodeOptionsMultipleThemes['themes'];
17  language?: BundledLanguage;
18  children: string;
19  syntaxHighlighting?: boolean;
20};
21 
22export const CodeBlockContent = async ({
23  children,
24  themes,
25  language,
26  syntaxHighlighting = true,
27  ...props
28}: CodeBlockContentProps) => {
29  const html = syntaxHighlighting
30    ? await codeToHtml(children as string, {
31        lang: language ?? 'typescript',
32        themes: themes ?? {
33          light: 'vitesse-light',
34          dark: 'vitesse-dark',
35        },
36        transformers: [
37          transformerNotationDiff({
38            matchAlgorithm: 'v3',
39          }),
40          transformerNotationHighlight({
41            matchAlgorithm: 'v3',
42          }),
43          transformerNotationWordHighlight({
44            matchAlgorithm: 'v3',
45          }),
46          transformerNotationFocus({
47            matchAlgorithm: 'v3',
48          }),
49          transformerNotationErrorLevel({
50            matchAlgorithm: 'v3',
51          }),
52        ],
53      })
54    : children;
55 
56  return (
57    <div
58      // biome-ignore lint/security/noDangerouslySetInnerHtml: "Kinda how Shiki works"
59      dangerouslySetInnerHTML={{ __html: html }}
60      className="bg-background border rounded-lg"
61      {...props}
62    />
63  );
64};