feat: add line number to Highlight

src/components/Highlight.tsx

@@ -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 })} />
                             ))}