https://github.com/zdunecki/react-router-server-side-components-syntax-highlighting
A demo using React Router Server Side Components + Syntax Highlighting (Code Hike)
https://github.com/zdunecki/react-router-server-side-components-syntax-highlighting
Last synced: 8 months ago
JSON representation
A demo using React Router Server Side Components + Syntax Highlighting (Code Hike)
- Host: GitHub
- URL: https://github.com/zdunecki/react-router-server-side-components-syntax-highlighting
- Owner: zdunecki
- Created: 2025-08-22T23:11:50.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2025-08-25T15:00:38.000Z (9 months ago)
- Last Synced: 2025-09-03T12:55:47.531Z (9 months ago)
- Language: TypeScript
- Homepage: https://react-router-rsc-syntax-highlight.netlify.app
- Size: 60.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Router Server Side Components Syntax Highlighting
A modern React application demonstrating React Router with Server Components and syntax highlighting using Code Hike. This project showcases how to build a full-stack React application with server-side rendering capabilities and beautiful code syntax highlighting.
## 🚀 Features
- **React Router v7** - Latest routing with server-side rendering
- **Server Components** - React Server Components for improved performance
- **Syntax Highlighting** - Beautiful code highlighting with Code Hike
- **TypeScript** - Full TypeScript support
- **Tailwind CSS** - Modern styling with Tailwind CSS
- **Vite** - Fast build tool and development server
- **Express Server** - Production-ready Node.js server
## 🛠️ Installation
1. Clone the repository:
```bash
git clone
cd react-router-server-side-components-syntax-highlighting
```
2. Install dependencies:
```bash
npm install
```
## 🚀 Development
Start the development server:
```bash
npm run dev
```
The application will be available at `http://localhost:5173`
## 🏗️ Building for Production
Build the application:
```bash
npm run build
```
Start the production server:
```bash
npm start
```
## 🎨 Syntax Highlighting
The project uses Code Hike for syntax highlighting. Here's how it's implemented:
```tsx
import { highlight, Pre } from "codehike/code"
export async function CodeSnippet() {
const codeblock = `
export async function HomePage() {
const data = await fetchData()
return (
{data.title}
{data.description}
)
}
`
const highlighted = await highlight({
value: codeblock,
lang: "tsx",
meta: "Server Component",
}, "github-dark")
return
}
```