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')
light.css
/* 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
/* 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

JavaScript works by default. Pass canonical names directly. lang() turns aliases and extensions such as py and yml intopython and yaml.

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

Code block & editor

Use the <Editor /> & <Code /> to present or edit highlighted code.

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

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.