/sugar-high

✏️ Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped

Primary LanguageJavaScript

Sugar High

Build Coverage

Introduction

Super lightweight JSX syntax highlighter, around 1KB after minified and gzipped

img

Usage

npm install --save sugar-high
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.

/**
 * 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.

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(<line number>) to highlight specific line.

.sh__line:nth-child(5) {
  background: #f5f5f5;
}

CSS Class Names

You can use .sh__token--<token type> to customize the output node of each token.

.sh__token--keyword {
  background: #f47067;
}

LICENSE

MIT