Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huozhi/sugar-high
✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped
https://github.com/huozhi/sugar-high
highlight highlighter js jsx syntax syntax-highlighting
Last synced: about 2 months ago
JSON representation
✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped
- Host: GitHub
- URL: https://github.com/huozhi/sugar-high
- Owner: huozhi
- Created: 2022-01-28T22:34:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-31T09:48:08.000Z (about 2 months ago)
- Last Synced: 2024-07-31T11:03:58.051Z (about 2 months ago)
- Topics: highlight, highlighter, js, jsx, syntax, syntax-highlighting
- Language: JavaScript
- Homepage: https://sugar-high.vercel.app
- Size: 197 KB
- Stars: 502
- Watchers: 4
- Forks: 15
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sugar High
[![Build][build-badge]][build]
[![Coverage][coverage-badge]][coverage]
### Introduction
Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped
### Usage
```sh
npm install --save sugar-high
```
```js
import { highlight } from 'sugar-high'
const codeHTML = highlight(code)
document.querySelector('pre > code').innerHTML = codeHTML
```
### Highlight with CSS
Then make your own theme with customized colors by token type and put in global CSS. The corresponding class names start with `--sh-` prefix.
```css
/**
* Types that sugar-high have:
*
* identifier
* keyword
* string
* Class, number and null
* property
* entity
* jsx literals
* sign
* comment
* break
* space
*/
: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;
}
```
### Features
#### Line number
Sugar high provide `.sh_line` class name for each line. To display line number, define the `.sh_line::before` element with CSS will enable line numbers automatically.
```css
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;
}
```
### Line Highlight
Use `.sh__line:nth-child()` to highlight specific line.
```css
.sh__line:nth-child(5) {
background: #f5f5f5;
}
```
#### CSS Class Names
You can use `.sh__token--` to customize the output node of each token.
```css
.sh__token--keyword {
background: #f47067;
}
```
### LICENSE
MIT
[build-badge]: https://github.com/huozhi/sugar-high/workflows/Test/badge.svg
[build]: https://github.com/huozhi/sugar-high/actions
[coverage-badge]: https://badge.fury.io/js/sugar-high.svg
[coverage]: https://codecov.io/github/huozhi/sugar-high
[downloads-badge]: https://img.shields.io/npm/dm/sugar-high.svg
[downloads]: https://www.npmjs.com/package/sugar-high