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')
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 default
highlight('print("hi")', { lang: 'python' }) // canonical name
highlight('name: sugar-high', { lang: lang('yml') }) // yml → yaml
All languages
ValueLanguage & relatives
javascriptJavaScript, JSX
typescriptTypeScript, TSX
cssCSS, SCSS
pythonPython
cC
goGo
javaJava
rustRust
jsonJSON, JSONC
diffDiff, patch
shellShell, Bash, Zsh
cppC++
csharpC#
sqlSQL
htmlHTML, XML
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.

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

Sugar HighPrismJShighlight.js

Minified bundle

Sugar High
9.90 KiB
PrismJS
14.63 KiB
highlight.js
29.54 KiB

Gzip bundle

Sugar High
4.35 KiB
PrismJS
5.47 KiB
highlight.js
11.12 KiB

500 KiB file

Sugar High
90.98 ms
PrismJS
96.41 ms
highlight.js
118.39 ms

Measured 2026-09-04.