ui/src/components/CodeBlock.tsx


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

import { Highlight, themes } from "prism-react-renderer";

// @ts-ignore
import Prism from "prismjs";

// @ts-ignore
import "prismjs/components/prism-bash";

export default function CodeBlock({ code, language }: any) {
  return (
    <div className="overflow-auto">
      <Highlight
        theme={themes.github}
        code={code}
        prism={Prism}
        language={language}
      >
        {({ style, tokens, getLineProps, getTokenProps }) => (
          <pre style={style} className="p-4 break-words whitespace-pre-wrap">
            {tokens.map((line, i) => (
              <div key={i} {...getLineProps({ line })} data-vaul-no-drag>
                {i == 0 && (
                  <span className="text-gray-500 select-none">$ </span>
                )}
                {line.map((token, key) => (
                  <span
                    key={key}
                    {...getTokenProps({ token })}
                    data-vaul-no-drag
                  />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    </div>
  );
}