Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 41 42 43 44 45 46 47 | import { Box, BoxProps, useColorModeValue } from "@chakra-ui/react";
import Highlight, { defaultProps, Language } from "prism-react-renderer";
import nightOwl from "prism-react-renderer/themes/nightOwl";
import nightOwlLight from "prism-react-renderer/themes/nightOwlLight";
import { FunctionComponent } from "react";
import { MultiLineRenderer } from "./MultiLineRenderer";
import { SingleLineRenderer } from "./SingleLineRenderer";
export interface CodeProps extends BoxProps {
code: string;
language: Language;
}
export const Code: FunctionComponent<CodeProps> = ({
code,
language,
...boxProps
}) => {
const codeTheme = useColorModeValue(nightOwlLight, nightOwl);
return (
<Highlight
{...defaultProps}
code={code}
language={language}
theme={codeTheme}
>
{(props) => (
<Box
as="pre"
border="base"
borderRadius="md"
boxShadow="base"
className={props.className}
style={props.style}
{...boxProps}
>
{props.tokens.length > 1 ? (
<MultiLineRenderer {...props} code={code} />
) : (
<SingleLineRenderer {...props} code={code} />
)}
</Box>
)}
</Highlight>
);
};
|