Syntax Highlighter For JSX – Sugar High

Sugar High is a dead-simple syntax highlighting library for JSX, which is a syntax extension to JavaScript.

How to use it:

1. Install and import the Sugar High.

# NPM
$ npm i sugar-high

import { highlight } from 'sugar-high'

<!-- Browser -->
<script type="module">
  import { highlight } from './index.mjs';
</script>

2. Create an empty container to hold your JSX snippets.

<pre>
  <code></code>
</pre>

3. Initialize the library and prepare your JSX snippets.

const codeHTML = highlight(yourJSXSnippets);

4. Output the result.

document.querySelector('pre > code').innerHTML = codeHTML

5. Apply your own styles to the Syntax Highlighter.

.sh__class {
  color: #2d5e9d;
}
.sh__identifier {
  color: #2d333b;
}
.sh__sign {
  color: #8996a3;
}
.sh__string {
  color: #00a99a;
}
.sh__keyword {
  color: #f47067;
}
.sh__comment {
  color: #a19595;
}

6. Display line numbers:

pre code {
  counter-reset: sh-line-number;
}
.sh__line::before {
  counter-increment: sh-line-number 1;
  content: counter(sh-line-number);
  margin-right: 24px;
  text-align: right;
  color: #a4a4a4;
}

Changelog:

v1.0.0 (03/24/2026)

• TypeScript / TSX support with TS keywords and better generics vs JSX handling.
• Improved CSS, Python, and Rust language presets.
• Parser fixes across tokenization and highlighted output.
• New hook (onQuote) for building presets and custom grammars.