sugar-high

Sugar High

Introduction

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

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

Use With Remark.js

Remark.js is a powerful markdown processor, you can use the sugar-high remark plugin with remark.js to highlight code blocks in markdown.

Check out the documentation for more details.

LICENSE

MIT