前言

身為工程師的文章，肯定少不了用到一些程式碼相關的文章段落。若有程式碼對應的元件，可以讓網頁在呈現上顯得更加活潑有趣。

Code

1. 使用 Shadcn CLI 加入 Code 元件

   npx shadcn@latest add @animate-ui/components-animate-code
   

2. Import 元件並將元件放在想要的位置上

   import { CodeBlock } from '@/components/animate-ui/primitives/animate/code-block';
   

   const CODES = {
       first: `Your Code Here`
   };
   
   <Code code={CODES.first}>
       <CodeHeader />
       <CodeBlock lang="tsx" />
   </Code>
   

   這時程式碼的片段會呈現如下：

   

   接著我們來增加點小動畫，將 <Code>、<CodeHeader> 和 <CodeBlock> 中元素增加點參數。可以參考範例如下：

   <Code
       key={123}
       className="w-[420px] h-[372px]"
       code={CODES.first}
   >
       <CodeHeader copyButton>
           my-component.tsx
       </CodeHeader>
   
       <CodeBlock
           theme="light"
           cursor={true}
           lang="tsx"
           writing={true}
           duration={5000}
           delay={0}
       />
   </Code>
   

   呈現結果如下

   

   深色模式呈現結果如下

   

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

Code 參數：

CodeHeader 參數：

CodeBlock 參數會在幾天後的文章一併釋出～

小結

在今天的文章中，我們介紹 Animate UI Code (程式碼顯示區塊)，一步步帶你了解如何建立並使用這個元件。若在過程中遇到出現亂碼 (如下圖 GIF) 也不用緊張，先嘗試使用這篇文章的第一步，更新你的 Components，正常應該是會已經修復好了。

在撰寫這篇文章時，偶然發現的 Bug，後來我嘗試修正找出問題點，並且將修正好的版本也提交給作者，成功 Merge Requests 啦 🎉

Reference

• Animate UI Docs