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

Highlight your code with sugar-high

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

/* styles.css */:root {  --sh-class: #2d5e9d;  --sh-identifier: #354150;  --sh-sign: #8996a3;  --sh-property: #0550ae;  --sh-entity: #249a97;  --sh-jsxliterals: #6266d1;  --sh-string: #00a99a;  --sh-keyword: #f47067;  --sh-comment: #a19595;}

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.