feat: add line number to Highlight
This commit is contained in:
parent
7b7af1e802
commit
17c0cc5cb5
@ -1,11 +1,21 @@
|
||||
import { Code, useColorModeValue } from "@chakra-ui/react";
|
||||
import { Highlight as PrismHighlight, themes } from "prism-react-renderer";
|
||||
import type React from "react";
|
||||
|
||||
interface HighlightProps {
|
||||
lang: string;
|
||||
code: string;
|
||||
}
|
||||
|
||||
const linenoStyle: React.CSSProperties = {
|
||||
display: "inline-block",
|
||||
width: "1.5em",
|
||||
textAlign: "right",
|
||||
marginRight: "0.6em",
|
||||
userSelect: "none",
|
||||
opacity: "0.5",
|
||||
};
|
||||
|
||||
export default function Highlight(props: HighlightProps) {
|
||||
const codeTheme = useColorModeValue(themes.oneLight, themes.oneDark);
|
||||
|
||||
@ -22,6 +32,7 @@ export default function Highlight(props: HighlightProps) {
|
||||
>
|
||||
{tokens.map((line, i) => (
|
||||
<div key={i} {...getLineProps({ line })}>
|
||||
<span style={linenoStyle}>{i + 1}</span>
|
||||
{line.map((token, key) => (
|
||||
<span key={key} {...getTokenProps({ token })} />
|
||||
))}
|
||||
|
Loading…
Reference in New Issue
Block a user