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')
Taffy
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

Match light and dark token palettes for your theme

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: #665ac7;  --sh-property: #4e8fdf;}
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: #b7adff;  --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 out of the box—no extra grammars or setup required. JavaScript and JSX work by default.

Use lang() to resolve filenames, extensions, and aliases to a language name.

import { highlight } from 'sugar-high'import { lang } from 'sugar-high/lang'highlight('const ready = true') // JavaScript is the defaulthighlight('print("hi")', { lang: 'python' }) // canonical namehighlight('name: sugar-high', { lang: lang('yml') }) // yml → yaml
All languages
ValueLanguage & relatives
javascriptJavaScript, JSX
typescriptTypeScript, TSX
cssCSS, SCSS
pythonPython
cC
goGo
glslglsl
javaJava
rustRust
jsonJSON, JSONC
diffDiff, patch
shellShell, Bash, Zsh
cppC++
csharpC#
sqlSQL
htmlHTML, XML
vueVue
svelteSvelte
yamlYAML
markdownMarkdown, MDX
plaintextPlain text
rubyRuby
kotlinKotlin, Kotlin Script
swiftSwift
phpPHP
tomlTOML
powershellPowerShell
dockerfileDockerfile
graphqlGraphQL
hclHCL, Terraform
zigZig
luaLua

Solution

React Components

@sugar-high/react provides <Editor /> & <Code /> to present or edit highlighted code, with built-in themes and custom token colors.

Themes

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

Agent skill

Give an AI coding agent Sugar High’s React, Remark, language, and customization API guidance with the Skills CLI.

npx skills add huozhi/sugar-high --skill sugar-high

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.

Benchmark

LibraryGzip · KiBMinified · KiB500 KiB TypeScript · ms
Sugar High
4.35
9.90
90.98
PrismJS
5.47
14.63
96.41
highlight.js
11.12
29.54
118.39
Methodology ↗

Small parser, just enough context

Regex matches can misclassify tokens without context. Sugar High’s small parser tracks “loose context” for highlighting—far lighter than an abstract syntax tree (AST). This helps keep tokens in context while balancing correctness, bundle size, and speed.