Package Exports

sugar-high
sugar-high/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sugar-high) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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