Day 10 - Animate UI Code

前言

#

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

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 參數：

   參數	參數型態	說明
   className?	string	自訂 CSS 類別名稱，可參考 Tailwind CSS
   code	string	要顯示的程式碼內容

   CodeHeader 參數：

   參數	參數型態	說明
   className?	string	自訂 CSS 類別名稱，可參考 Tailwind CSS
   children	React.ReactNode	元件的子元素內容，這裡是呈現檔案名稱用
   icon	React.ElementType	傳入的圖示元件，例如來自 lucide-react 的 Icon
   copyButton?	boolean	是否顯示「複製」按鈕，預設為 false

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

小結

#

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

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

Reference

#

• Animate UI Docs