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

Light & dark

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: #6eafad;  --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: #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.