diff --git a/package-lock.json b/package-lock.json
index 94c742f0..ee86d85a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -230,6 +230,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",
@@ -7408,6 +7409,62 @@
         "webpack": ">=4.40.0"
       }
     },
+    "node_modules/@shikijs/core": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmmirror.com/@shikijs/core/-/core-1.24.1.tgz",
+      "integrity": "sha512-3q/9oarMVcLqJ+NQOdKL40dJVq/UKCsiWXz3QRQPBglHqa8dDJ0p6TuMuk2gHphy5FZcvFtg4UHBgpW0JtZ8+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/engine-javascript": "1.24.1",
+        "@shikijs/engine-oniguruma": "1.24.1",
+        "@shikijs/types": "1.24.1",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4",
+        "hast-util-to-html": "^9.0.3"
+      }
+    },
+    "node_modules/@shikijs/engine-javascript": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmmirror.com/@shikijs/engine-javascript/-/engine-javascript-1.24.1.tgz",
+      "integrity": "sha512-lNgUSHYDYaQ6daj4lJJqcY2Ru9LgHwpFoposJkRVRPh21Yg4kaPFRhzaWoSg3PliwcDOpDuMy3xsmQaJp201Fg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "1.24.1",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "oniguruma-to-es": "0.7.0"
+      }
+    },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmmirror.com/@shikijs/engine-oniguruma/-/engine-oniguruma-1.24.1.tgz",
+      "integrity": "sha512-KdrTIBIONWd+Xs61eh8HdIpfigtrseat9dpARvaOe2x0g/FNTbwbkGr3y92VSOVD1XotzEskh3v/nCzyWjkf7g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "1.24.1",
+        "@shikijs/vscode-textmate": "^9.3.0"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmmirror.com/@shikijs/types/-/types-1.24.1.tgz",
+      "integrity": "sha512-ZwZFbShFY/APfKNt3s9Gv8rhTm29GodSKsOW66X6N+HGsZuaHalE1VUEX4fv93UXHTZTLjb3uxn63F96RhGfXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmmirror.com/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz",
+      "integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "dev": true,
@@ -16869,6 +16926,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/emoji-regex-xs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
+      "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/emojis-list": {
       "version": "3.0.0",
       "dev": true,
@@ -20516,6 +20580,30 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-html": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmmirror.com/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz",
+      "integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "stringify-entities": "^4.0.0",
+        "zwitch": "^2.0.4"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.2",
       "license": "MIT",
@@ -27476,6 +27564,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/oniguruma-to-es": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmmirror.com/oniguruma-to-es/-/oniguruma-to-es-0.7.0.tgz",
+      "integrity": "sha512-HRaRh09cE0gRS3+wi2zxekB+I5L8C/gN60S+vb11eADHUaB/q4u8wGGOX3GvwvitG8ixaeycZfeoyruKQzUgNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex-xs": "^1.0.0",
+        "regex": "^5.0.2",
+        "regex-recursion": "^4.3.0"
+      }
+    },
     "node_modules/only": {
       "version": "0.0.2",
       "dev": true
@@ -32185,6 +32285,33 @@
         "@babel/runtime": "^7.8.4"
       }
     },
+    "node_modules/regex": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmmirror.com/regex/-/regex-5.0.2.tgz",
+      "integrity": "sha512-/pczGbKIQgfTMRV0XjABvc5RzLqQmwqxLHdQao2RTXPk+pmTXB2P0IaUHYdYyk412YLwUIkaeMd5T+RzVgTqnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-recursion": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/regex-recursion/-/regex-recursion-4.3.0.tgz",
+      "integrity": "sha512-5LcLnizwjcQ2ALfOj95MjcatxyqF5RPySx9yT+PaXu3Gox2vyAtLDjHB8NTJLtMGkvyau6nI3CfpwFCjPUIs/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "regex-utilities": "^2.3.0"
+      }
+    },
+    "node_modules/regex-utilities": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/regex-utilities/-/regex-utilities-2.3.0.tgz",
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/regexp-tree": {
       "version": "0.1.27",
       "dev": true,
@@ -33513,6 +33640,21 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/shiki": {
+      "version": "1.24.1",
+      "resolved": "https://registry.npmmirror.com/shiki/-/shiki-1.24.1.tgz",
+      "integrity": "sha512-/qByWMg05+POb63c/OvnrU17FcCUa34WU4F6FCrd/mjDPEDPl8YUNRkRMbo8l3iYMLydfCgxi1r37JFoSw8A4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/core": "1.24.1",
+        "@shikijs/engine-javascript": "1.24.1",
+        "@shikijs/engine-oniguruma": "1.24.1",
+        "@shikijs/types": "1.24.1",
+        "@shikijs/vscode-textmate": "^9.3.0",
+        "@types/hast": "^3.0.4"
+      }
+    },
     "node_modules/side-channel": {
       "version": "1.0.6",
       "license": "MIT",
diff --git a/package.json b/package.json
index bc3371b3..203d2bf9 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/stateless/ShiCode/index.jsx b/src/components/stateless/ShiCode/index.jsx
new file mode 100644
index 00000000..f2698ea2
--- /dev/null
+++ b/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
diff --git a/src/components/stateless/ShiCode/index.module.less b/src/components/stateless/ShiCode/index.module.less
new file mode 100644
index 00000000..4cc026b8
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
index 657b9197..f98c0c5a 100644
--- a/src/pages/home/index.jsx
+++ b/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>
   )
 }