<div align="center">
<a href="https://code-blocks.pheralb.dev">
<img
src="https://code-blocks.pheralb.dev/images/code-blocks-svg.svg"
alt="@pheralb/code-blocks"
height="60"
/>
</a>
<p />
<p>
<b>
A code-block UI component. Copy-Paste. Customizable.
</b>
</p>
<a href="http://code-blocks.pheralb.dev/docs">Get Started</a>
<span> ✦ </span>
<a href="http://code-blocks.pheralb.dev/components">Components</a>
<span> ✦ </span>
<a href="http://code-blocks.pheralb.dev/blocks">Blocks</a>
<span> ✦ </span>
<a href="#-contributing">Contributing</a>
<span> ✦ </span>
<a href="#-license">License</a>
<img
src="./apps/website/public/images/screenshot-2.png"
alt="@pheralb/code-blocks screenshot"
/>
</div>
<div align="center">
[](https://actions-badge.atrox.dev/pheralb/code-blocks/goto?ref=main)
</div>
## Features
- 📋 **Copy-Paste**: Copy code with a single click, it's 100% yours.
- 🎨 **Customizable**: Styled with Tailwind CSS, easily customize it to fit your design.
- 📦 **Components & Blocks**: Basic structure and blocks for building your own code-block UI.
- 🖌️ **[Shiki](https://github.com/shikijs/shiki) & [Sugar-High](https://github.com/huozhi/sugar-high/)**: Choose your syntax highlighter.
- ⚙️ [**shadcn/ui**](https://ui.shadcn.com) compatible: Add components and utilities using shadcn/ui CLI.
## Contributing
We welcome contributions to enhance the functionality, design, and documentation of this project. To contribute, please read our [Contributing Guide](https://github.com/pheralb/code-blocks/blob/main/CONTRIBUTING.md).
### Development Setup
1. Clone the repository:
```bash
git clone git@github.com:pheralb/code-blocks.git
cd code-blocks
```
2. Install dependencies:
```bash
# Install pnpm globally if you haven't already:
npm i pnpm@latest -g
# Install project dependencies:
pnpm install
```
3. Start the development server:
```bash
pnpm dev
```
### Commands
- `pnpm dev`: Start the development server for the docs website.
- `pnpm website:build-registry`: Build the component and block registry.
- `pnpm website:build`: Build the docs website for production.
- `pnpm website:build-cc`: Build content using content-collections CLI.
## License
This project is licensed under the MIT License. See the [LICENSE](https://github.com/pheralb/code-blocks/blob/main/LICENSE) file for details.