• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
stevekrouse

stevekrouse

satori-syntax-highlighter

Public
Like
satori-syntax-highlighter
Home
Code
4
backend
2
frontend
3
shared
2
README.md
Branches
1
Pull requests
Remixes
History
Environment variables
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.
Sign up now
Code
/
Code
/
Search
index.tsx
https://stevekrouse--1d8c972a329311f09953569c3dd06744.web.val.run
README.md

Satori Syntax Highlighter for Val Town

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.

Features

  • Generate syntax-highlighted images from code snippets
  • Customize background color, language, and font size
  • Supports JavaScript, TypeScript, CSS, and HTML
  • Modular architecture with Hono

Project Structure

├── 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

Technologies Used

  • Hono - Lightweight web framework
  • Satori - For rendering React components to SVG
  • Lowlight - For syntax highlighting
  • Yoga - For layout
  • React - For UI components

Usage

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 highlight
  • background: The background color (default: gold)
  • lang: The language (js, css, typescript, xml)
  • fontSize: The font size (default: 16)

License

The MIT License (MIT).

HTTP
  • index.tsx
    stevekrouse--1d…44.web.val.run
Code
backendfrontendsharedREADME.md
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.