feat: shiki code

package.json

@@ -195,6 +195,7 @@
     "scripty": "^2.1.1",
     "serve": "^14.2.4",
     "shelljs": "^0.8.5",
+    "shiki": "^1.24.1",
     "standard": "^17.1.2",
     "standard-version": "^9.5.0",
     "style-loader": "^4.0.0",

src/components/stateless/ShiCode/index.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { codeToHtml } from 'shiki'
+import { Highlight, themes } from 'prism-react-renderer'
+import useCopyToClipboard from '@hooks/useCopyToClipboard'
+import {
+  CopyOutlined,
+  CheckCircleTwoTone
+} from '@ant-design/icons';
+import styles from './index.module.less'
+
+const ShiCode = ({ preCode }) => {
+  const [copyToClipboard, copyResult] = useCopyToClipboard()
+  const handleClickCopy = () => {
+    copyToClipboard(preCode);
+  }
+
+  return (
+    <div className="rounded-md bg-cyan-800 text-zinc-50">
+      <header className="grid grid-cols-6 gap-3 items-center px-4 py-3">
+        <div className="flex gap-1.5">
+          <div className="rounded-full h-3 w-3 bg-red-500"></div>
+          <div className="rounded-full h-3 w-3 bg-yellow-500"></div>
+          <div className="rounded-full h-3 w-3 bg-green-500"></div>
+        </div>
+        <div className="col-span-4 flex justify-center">
+          <div className="bg-transparent text-center text-gray-400 text-sm font-medium focus:outline-none">Untitled</div>
+        </div>
+      </header>
+      <div className="relative px-4 pb-4">
+        <div className="absolute top-2 right-5 size-4 text-gray-400">
+          {copyResult?.state === 'success' ? <CheckCircleTwoTone className="size-4 text-base" twoToneColor="#52c41a" /> : <CopyOutlined className="size-4 text-base" onClick={handleClickCopy}/>}
+        </div>
+
+        <Highlight theme={themes.dracula} className={styles.wrapper} code={preCode?.trim()} language="jsx">
+          {({ style, tokens, getLineProps, getTokenProps }) => (
+            <pre className={styles.pre} style={style}>
+              {tokens.map((line, i) => (
+                <div className={styles.line} key={i} {...getLineProps({ line })}>
+                  <span className={styles['line-no']}>{i + 1}</span>
+                  {line.map((token, key) => (
+                    <span key={key} {...getTokenProps({ token })} />
+                  ))}
+                </div>
+              ))}
+            </pre>
+          )}
+        </Highlight>
+      </div>
+    </div>
+  )
+}
+
+export default ShiCode

src/components/stateless/ShiCode/index.module.less

@@ -0,0 +1,25 @@
+.warpper {
+  font-family: sans-serif;
+  text-align: center;
+}
+
+.pre {
+  text-align: left;
+  padding: 0.5em;
+  overflow: auto;
+  & .token-line {
+    line-height: 1.3em;
+    height: 1.3em;
+  }
+}
+
+.line {
+  padding-right: 0.5em;
+}
+
+.line-no {
+  text-align: right;
+  padding-right: 1em;
+  user-select: none;
+  opacity: 0.5;
+}

src/pages/home/index.jsx

@@ -29,6 +29,7 @@ import AnimateWave from '@stateless/AnimateWave'
 import MeshGradientBackground from '@stateless/MeshGradientBackground'
 import useRect from '@hooks/useRect'
 import TagCloud from '@stateless/TagCloud'
+import ShiCode from '@stateless/ShiCode'
 // import SlideLinear from '@stateless/SlideLinear'
 // import Masonry from '@container/masonryContainer'
 
@@ -328,7 +329,6 @@ const Home = () => {
       <section style={{ margin: '20px 0', fontSize: 40 }}>
         <CountUp start={20} end={10000} duration={10} enableScrollSpy />
       </section>
-
       <section style={{ width: 600, margin: '30px 0' }}>
         <Input defaultValue={apiKey} placeholder="api key" onChange={changeApiKey} style={{ marginBottom: 20 }} />
         <Flex align="center">
@@ -399,6 +399,21 @@ const Home = () => {
           <div style={{ width: 200, height: 40, lineHeight: '40px', textAlign: 'center', background: '#aaa', margin: '0 10px', borderRadius: 4 }}>Vue</div>
         </Marquee>
       </section>
+      <section style={{ margin: '20px 0' }}>
+        <ShiCode
+          preCode={`
+const GroceryItem: React.FC<GroceryItemProps> = ({ item }) => {
+  return (
+    <div>
+      <h2>{item.name}</h2>
+      <p>Price: {item.price}</p>
+      <p>Quantity: {item.quantity}</p>
+    </div>
+  );
+}
+          `}
+        />
+      </section>
     </FixTabPanel>
   )
 }