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;
}