Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/remcostoeten/react-next-beautiful-code-block-syntax-highlight-search-kbd
A beautiful feature rich custom code block renderer for React / Next.JS component to dislpay snippets with features like syntax highlight, search, keyboard shortcuts and more.
https://github.com/remcostoeten/react-next-beautiful-code-block-syntax-highlight-search-kbd
codeblocks docs keyboard-shortcuts nextjs react search snippets syntax-highlighting typescript
Last synced: 12 days ago
JSON representation
A beautiful feature rich custom code block renderer for React / Next.JS component to dislpay snippets with features like syntax highlight, search, keyboard shortcuts and more.
- Host: GitHub
- URL: https://github.com/remcostoeten/react-next-beautiful-code-block-syntax-highlight-search-kbd
- Owner: remcostoeten
- License: mit
- Created: 2024-10-26T18:48:05.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-14T00:42:56.000Z (about 2 months ago)
- Last Synced: 2024-11-14T01:28:37.462Z (about 2 months ago)
- Topics: codeblocks, docs, keyboard-shortcuts, nextjs, react, search, snippets, syntax-highlighting, typescript
- Language: TypeScript
- Homepage: https://beautiful-code-block.remcostoeten.com
- Size: 344 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# CodeBlock
CodeBlock is a presenter component which I initially created for storing snippets inside any JSX renderer. I eventually decided to expand it by generalizing the non-project specific details and making it more feature-rich. Besides being the most beautiful code-block component you'll find on the internet, it is fairly minimal with an easy-to-use API while still containing enough features to be a go-to solution.
[Live Demo](https://codeblock.remcostoeten.com/)
## Features
- Unified syntax highlighting with language indicator support (Rust, TypeScript, React, Markdown, Python, JavaScript, with easy addition of new ones through `icons.tsx`)
- Beautiful theme with optional customizable file
- Line numbers and _line highlighting_
- Keyboard shortcuts:
- CMD/CTRL + C to copy selection
- CMD/CTRL + F to search
- CMD/CTRL + G to jump to line
- Search and highlight found lines
- Easy integration with React applications
- Custom colorized labels and badges
- Paste button
- Copy button
- Package-less in-block toast alerts (copied to clipboard etc.)
## Examples
### Basic Usage
```tsx
import { CodeBlock } from "@/components/code-block/code-block";
// Basic example
;
```
### Advanced Usage with Event Handlers
```tsx
import { CodeBlock } from "@/components/code-block/code-block";
export default function AdvancedExample() {
const handleSearch = (query: string, results: number[]) => {
console.log(`Found matches at lines: ${results.join(", ")}`);
};
const handleLineClick = (lineNumber: number) => {
console.log(`Line ${lineNumber} clicked`);
};
return (
);
}
```
## TypeScript Props
```typescript
type CodeBlockProps = {
code: string;
language?: string;
showLineNumbers?: boolean;
enableLineHighlight?: boolean;
fileName?: string;
badges?: Array<{
text: string;
variant:
| "default"
| "primary"
| "secondary"
| "success"
| "warning"
| "danger";
}>;
onSearch?: (query: string, results: number[]) => void;
initialSearchQuery?: string;
initialSearchResults?: number[];
onLineClick?: (lineNumber: number) => void;
initialHighlightedLines?: number[];
maxHeight?: string;
};
```
### Props Description
| Prop | Type | Default | Description |
| ------------------------- | -------------- | -------------- | ----------------------------------------------------------------------------------------------- |
| `code` | `string` | Required | The source code to be displayed in the code block |
| `language` | `string` | `'typescript'` | Programming language for syntax highlighting (e.g., 'python', 'javascript', 'rust') |
| `showLineNumbers` | `boolean` | `false` | Enable/disable line number display in the gutter |
| `enableLineHighlight` | `boolean` | `false` | Enable/disable the ability to highlight lines on hover/click |
| `fileName` | `string` | - | Optional filename to display above the code block |
| `badges` | `Array` | - | Array of badge objects to display. Each badge has text and variant properties |
| `onSearch` | `function` | - | Callback function triggered on search, receives query string and array of matching line numbers |
| `initialSearchQuery` | `string` | - | Pre-populate the search field with this query |
| `initialSearchResults` | `number[]` | - | Pre-highlight these line numbers as search results |
| `onLineClick` | `function` | - | Callback function triggered when a line is clicked, receives line number |
| `initialHighlightedLines` | `number[]` | - | Array of line numbers to highlight on initial render |
| `maxHeight` | `string` | - | CSS max-height value for the code block container |
### Badge Variants
Badges can be customized with the following variants:
- `default`: Standard badge style
- `primary`: Primary theme color
- `secondary`: Secondary theme color
- `success`: Green success indicator
- `warning`: Yellow warning indicator
- `danger`: Red danger/error indicator
### Complete Example
```tsx
import { CodeBlock } from "@/components/code-block/code-block";
export default function CompleteExample() {
return (
{
console.log(`Found ${results.length} matches for "${query}"`);
}}
initialSearchQuery="console"
initialSearchResults={[2]}
onLineClick={(lineNumber) => {
console.log(`Clicked line ${lineNumber}`);
}}
initialHighlightedLines={[1, 2, 3]}
maxHeight="400px"
/>
);
}
```
## Installation & Usage
No package needed - own your code by copying the required files into your project. An NPM package is on the roadmap for personal use, but currently the setup requires manually copying the [code-block](https://github.com/remcostoeten/react-next-beautifull-code-block-syntax-highlight-search-kbd/tree/main/src/components/code-block) into your project.
### Quick Install
You can use the _highly experimental_ one-liner install command:
```bash
echo "🚀 Installing beautiful-code-block component..." && git clone --depth 1 --filter=blob:none --sparse https://github.com/remcostoeten/react-next-beautifull-code-block-syntax-highlight-search-kbd && cd react-next-beautifull-code-block-syntax-highlight-search-kbd && git sparse-checkout set src/components/code-block && mkdir -p ../components && cp -r src/components/code-block ../components/ && cd .. && rm -rf react-next-beautifull-code-block-syntax-highlight-search-kbd && echo "📦 Installing dependencies..." && npm install framer-motion lucide-react react-syntax-highlighter @radix-ui/react-slot class-variance-authority clsx tailwind-merge @radix-ui/react-dropdown-menu @radix-ui/react-toast && echo "✓ Installation complete!""
```
### Installation Script
For better control, create an installation script in your project root:
1. Create the script file:
```bash
touch setup.sh
sudo chmod +x setup.sh
# Edit with your preferred editor
vim setup.sh
```
2. Add the following content:
```bash
#!/bin/bash
# Display start message
echo "🚀 Installing beautiful-code-block component..." &&
# Clone repository with sparse checkout
git clone --depth 1 --filter=blob:none --sparse
https://github.com/remcostoeten/react-next-beautifull-code-block-syntax-highlight-search-kbd &&
# Navigate into repository
cd react-next-beautifull-code-block-syntax-highlight-search-kbd &&
# Set sparse-checkout for code-block component
git sparse-checkout set src/components/code-block &&
# Create components directory if not exists
mkdir -p ../components &&
# Copy code-block component to components directory
cp -r src/components/code-block ../components/ &&
# Navigate back and cleanup cloned repository
cd .. &&
rm -rf react-next-beautifull-code-block-syntax-highlight-search-kbd &&
# Install dependencies
echo "📦 Installing dependencies..." &&
npm install
framer-motion
lucide-react
react-syntax-highlighter
@radix-ui/react-slot
class-variance-authority
clsx
tailwind-merge
@radix-ui/react-dropdown-menu
@radix-ui/react-toast &&
# Display completion message
echo "✓ Installation complete!"
```
## Demo & Documentation
For live examples and complete documentation, visit [https://codeblock.remcostoeten.com](https://codeblock.remcostoeten.com)
xxx remco stoeten,
- [@remcostoeten on Github](https://github.com/remcostoeten)
- [@yowremco on X](https://twitter.com/yowremco)