Syntax Highlighter For JSX – Sugar High

Category: Javascript , Recommended | February 7, 2022
Author:huozhi
Views Total:40 views
Official Page:Go to website
Last Update:February 7, 2022
License:MIT

Preview:

Syntax Highlighter For JSX – Sugar High

Description:

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

You Might Be Interested In:


Leave a Reply