Sugar High

Super lightweight syntax highlighter

/* 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

Click the dashed file name to switch light or dark preview for the code samples below.Samples use

import { highlight } from 'sugar-high'const html = highlight(code)

/* styles.css — sugar-high token colors *//* Light (default) */: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 — e.g. <html data-theme="dark"> */: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;}

For CSS (and SCSS, Sass, Less), a preset treats /* */ comments and @-rules as CSS, not as JS regex or division. For Python, the preset uses # line comments and Python keywords instead of JS rules.

Pass that preset as the second argument to highlight. With Codice, set title to a file name so the extension selects the preset; in plain JS you can map title (or any path) the same way:

import { highlight } from 'sugar-high'import * as presets from 'sugar-high/presets'// Use the file extension from a path or Codice `title` (e.g. "theme.css", "main.py")const presetForTitle = (title) =>  ({ css: presets.css, py: presets.python, rs: presets.rust })[    title.split('.').pop()  ]highlight('.card { color: red; }', presetForTitle('theme.css'))highlight('def hi():\n    print("ok")', presetForTitle('main.py'))

SCSS, Sass, and Less use the same CSS preset. Rust uses presets.rust.

Usage with remark.js

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