v2.0.0

Sugar High v2 grows from a JavaScript-focused highlighter into a small, composable highlighting toolkit. The default API stays convenient, while new core APIs support editors, renderers, Remark plugins, and custom language composition.

Highlights

• 25 canonical built-in languages, with related dialects unified rather than duplicated
• A focused highlight() API for the common path
• A composable sugar-high/core API built around parse(), generate(), and render()
• Granular token and line presentation through cx, mark, and markLine
• Typed generated nodes for integrations that do not render directly to HTML
• First-party React code-block and editor components
• A first-party Remark plugin
• Copyable light and dark themes, CSS-variable recipes, and agent setup guidance
• Package-boundary consumer tests, bundle-size reporting, and npm provenance through OIDC

Packages

npm install sugar-high@2
npm install @sugar-high/react@1
npm install @sugar-high/remark@1

• sugar-high@2.0.0
• @sugar-high/react@1.0.0
• @sugar-high/remark@1.0.0

Default API

import { highlight } from 'sugar-high'

highlight(source)
highlight(source, { lang: 'python' })
highlight(source, {
  lang: 'diff',
  cx: token => token.type === 'keyword' ? 'font-bold' : undefined,
  mark(token) {
    token.properties['data-token'] = token.type
  },
  markLine(line) {
    if (line.annotations.includes('diff-add')) line.className += ' added'
  },
})

JavaScript remains the default. Related syntax is intentionally shared: JavaScript includes JSX, TypeScript includes TSX, JSON includes JSONC, Shell covers sh/Bash/zsh aliases, and HCL includes Terraform aliases.

Composable core

import { parse, generate, render } from 'sugar-high/core'

const parsed = parse(source, config)
const tree = generate(parsed, options)
const html = render(parsed, options)

Use sugar-high/lang when an extension or Markdown fence needs normalization:

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

highlight(source, { lang: lang(fileExtension) })

Integrations

import { Code, Editor } from '@sugar-high/react'

Code supports line numbers, automatic digit-aware gutters, and highlighted line ranges. Editor provides a lightweight controlled editor powered by the same highlighting pipeline.

import remarkSugarHigh from '@sugar-high/remark'

The ESM-first Remark plugin highlights fenced code and shares language normalization and presentation hooks with Sugar High.

Breaking changes

• Low-level tokenizer and parser configuration moved from root highlight() into parse() from sugar-high/core
• tokenize, generate, and the low-level configuration are no longer root exports
• Canonical language selection replaces the old presets surface
• lineClassName is replaced by markLine
• Generated semantic token nodes expose tokenType
• React imports are consolidated at @sugar-high/react; component subpaths are removed
• The Remark integration is now @sugar-high/remark and ESM-first

Read the v2 migration guide, API reference, and theme guide.

Size and performance

• Full package: 23.54 KiB minified / 8.59 KiB gzip
• Core: 3.57 KiB minified / 1.74 KiB gzip
• Python highlighting: approximately 26–27k operations per second in the repository benchmark

Thank you to everyone who reported issues, tested the integrations, and helped shape the v2 API.