Component Preview

Below is a small preview of what the CodeBlock component looks like in the application.

CodeBlock Component Preview

CodeBlock Component

The CodeBlock component is used throughout the documentation to render syntax-highlighted code snippets. It is built to handle a variety of programming languages and file formats, making it essential for showing examples in the docs. It also comes with a built-in copy button to make it easier for users to copy the code.

Props

  • code: string – The code that will be rendered inside the code block.
  • fileName: string – The file name displayed at the top of the code block.

Usage Example

You can use the CodeBlock component to display formatted code snippets in your documentation. Below is an example:

Home.tsx
<CodeBlock
  code={`import { Button } from "@/components/Button"`}
  fileName="Home.tsx"
/>