satori-syntax-highlighter
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
index.tsx
https://stevekrouse--1d8c972a329311f09953569c3dd06744.web.val.run
A syntax highlighter that generates images from code snippets. This is a port of the Satori Syntax Highlighter project to Val Town, restructured using Hono.
- Generate syntax-highlighted images from code snippets
- Customize background color, language, and font size
- Supports JavaScript, TypeScript, CSS, and HTML
- Modular architecture with Hono
├── backend/
│ ├── index.ts # Main entry point with Hono setup
│ └── routes/
│ └── highlighter-route.ts # Highlighter API route
├── frontend/
│ ├── components/
│ │ └── Playground.tsx # React component for the playground
│ ├── index.html # HTML template
│ └── index.tsx # Client-side entry point
└── shared/
├── types.ts # Shared TypeScript types
└── utils.ts # Shared utilities
- Hono - Lightweight web framework
- Satori - For rendering React components to SVG
- Lowlight - For syntax highlighting
- Yoga - For layout
- React - For UI components
Visit the frontend page to customize and generate syntax-highlighted images. The API endpoint is available at /api/highlighter
with the following parameters:
code
: The code to highlightbackground
: The background color (default: gold)lang
: The language (js, css, typescript, xml)fontSize
: The font size (default: 16)
The MIT License (MIT).