Sugar High

Super lightweight syntax highlighter solution

/* super tiny syntax highlighter *//* super tiny syntax highlighter *//* super tiny syntax highlighter */
import { highlight } from 'sugar-high'import { highlight } from 'sugar-high'import { highlight } from 'sugar-high'
const code = highlight('const text = 1')const code = highlight('const text = 1')const code = highlight('const text = 1')
use std::fmt::Display;/// Build a short Cartesian label for two displayable values.pub fn label<T: Display>(x: T, y: T) -> String { // format pair format!("({}, {})", x, y)}pub fn labels<I, T>(pairs: I) -> Vec<String>where I: IntoIterator<Item = (T, T)>, T: Display,{ pairs.into_iter().map(|(a, b)| label(a, b)).collect()}fn main() { let pts = vec![(1u32, 2u32), (3, 4)]; for line in labels(pts) { println!("point {line}"); } println!("{}", label("x", "y"));}
:root { --accent: #2d5e9d; --surface: #f6f8fa; --text: #24292f; --radius: 8px;}*,*::before,*::after { box-sizing: border-box;}body { margin: 0; font-family: system-ui, sans-serif; color: var(--text); background: var(--surface);}@media (prefers-color-scheme: dark) { :root { --surface: hsl(220 14% 12%); --text: #e6edf3; } .card { background: color-mix(in srgb, var(--surface) 92%, #000); border: 1px solid rgb(255 255 255 / 8%); }}/* motion */@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); }}.stack-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;}
type Point = { readonly x: number; y: number }interface Cluster { center: Point members: ReadonlyArray<Point>}export const origin = { x: 0, y: 0 } as const satisfies Pointexport function distance(a: Point, b: Point): number { return Math.hypot(a.x - b.x, a.y - b.y)}export function nearest<T extends Point>( items: readonly T[], ref: Point): T | undefined { return items.reduce<T | undefined>((best, item) => { if (!best) return item const db = distance(best, ref) const di = distance(item, ref) return di < db ? item : best }, undefined)}export function bbox(points: readonly Point[]) { if (!points.length) return null let minX = Infinity let minY = Infinity let maxX = -Infinity let maxY = -Infinity for (const p of points) { minX = Math.min(minX, p.x) minY = Math.min(minY, p.y) maxX = Math.max(maxX, p.x) maxY = Math.max(maxY, p.y) } return { minX, minY, maxX, maxY }}
export const matchBoundary = (s) => /^[/][\w-]+[/]$/u.test(s)// Slashes in comments are not regex delimiters// path: /usr/local/bin/** @see https://example.com/docs/foo/bar */const afterBlock = /foo/g.exec('foo')?.[0]// Regex vs division (tokenizer stress test)const mixed = 12 / /\d+/.test('3') ? 1 : 0const expr = 100 - /50/.test('5') + 25const flags = ['g', 'i', 'm'].filter(Boolean).join('')const re = new RegExp('\\d+', flags)export function pickDelim(str) { const i = str.indexOf('/') return i < 0 ? str : str.slice(0, i) + str.slice(i + 1)}// trailing note: / is both operator and literal starterconsole.log(mixed, expr, re.test('99'))
from dataclasses import dataclass@dataclass(frozen=True)class Filter: field: str value: strdef build_where(filters: list[Filter]) -> str: if not filters: return "1 = 1" parts = [f"{f.field} = :{f.field}" for f in filters] return " AND ".join(parts)print(build_where([Filter("status", "open"), Filter("owner", "me")]))
diff --git a/config/release.json b/config/release.json
@@ -1,5 +1,5 @@
 {
-  "channel": "beta",
+  "channel": "stable",
   "region": "eu-central"
 }

1export default function App() {2  return (3    <>4      <h1 id="title">5        Hello6        <span> world</span>7      </h1>8      <div style={styles.bar} />9    </>10  )11}1213

Basics

Light & dark

Match light and dark token palettes for your theme

light.css
/* light.css */:root {  --sh-class: #8d85ff;  --sh-identifier: #354150;  --sh-sign: #8996a3;  --sh-string: #00a99a;  --sh-keyword: #f47067;  --sh-comment: #a19595;  --sh-jsxliterals: #bf7db6;  --sh-entity: #6eafad;  --sh-property: #4e8fdf;}
dark.css
/* dark.css */:root[data-theme='dark'] {  --sh-class: #7eb5ff;  --sh-identifier: #d4d4d4;  --sh-sign: #8b949e;  --sh-string: #88bbb6;  --sh-keyword: #ffada8;  --sh-comment: #8b8b8b;  --sh-jsxliterals: #d2a8ff;  --sh-entity: #56d4dd;  --sh-property: #79c0ff;}

Line highlighting

Each line is a .sh__line, so target lines with CSS selectors or a custom line class.

.sh__line:nth-child(5),
.sh__line--highlighted {
  background: #fff8c5;
}

Languages

Sugar High includes 25 languages out of the box—no extra grammars or setup required. JavaScript and JSX work by default; pass a canonical name to highlight TypeScript, Python, CSS, Rust, Go, HTML, SQL, Markdown, and the other built-ins.

Related dialects share the same built-in implementation, including TSX, JSONC, Bash/Zsh, and Terraform. Use lang() when input comes from a filename or integration: it turns aliases and extensions such as py, yml, and gql into their canonical language names.

import { highlight } from 'sugar-high'
import { lang } from 'sugar-high/lang'

highlight('const ready = true') // JavaScript is the default
highlight('print("hi")', { lang: 'python' }) // canonical name
highlight('name: sugar-high', { lang: lang('yml') }) // yml → yaml

Solution

Themes

Set token colors with scoped CSS variables, then use cx for emphasis. Explore the copyable CSS and Tailwind theme guide.

React Components

@sugar-high/react provides <Editor /> & <Code /> to present or edit highlighted code.

Remark plugin

Remark.js is a powerful markdown processor, you can use the sugar-high remark plugin with remark.js to highlight code blocks in markdown.