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

Related tags

Learning resource syntax-highlighting syntax js jsx highlighter highlight
Overview

Sugar High

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 star with sh__ prefix.

/**
 * Types that sugar-high have:
 *
 * identifier
 * keyword
 * string
 * Class, number and null
 * sign
 * comment
 * jsxliterals
 */
:root {
  --sh-class: #2d5e9d;
  --sh-identifier: #354150;
  --sh-sign: #8996a3;
  --sh-string: #00a99a;
  --sh-keyword: #f47067;
  --sh-comment: #a19595;
  --sh-jsxliterals: #6266d1;
}

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

LICENSE

MIT

You might also like...

👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro

Aug 24, 2022

1kb js library contains development debugging, error monitoring and reporting, user problem localization features

1kb js library contains development debugging, error monitoring and reporting, user problem localization features

1kb js library contains development debugging, error monitoring and reporting, user problem localization features

Dec 22, 2022

A to-do list app is a productivity tool designed to help users to create and maintain lists of tasks that they need to complete and it allows user to edit their tasks even after the task is saved. Built with CSS, HTML, and JAVASCRIPT.

Tumaini Maganiko 📗 Table of Contents 📗 Table of Contents 📖 To Do List PROJECT 🛠 Built With Tech Stack Key Features 🚀 Live Demo 💻 Getting Started

May 9, 2023

🌗 1 line of code to apply auto dark / light theme and support custom theme for your website. Super fast and lightweight theme library.

themes.js A super lightweight and fast Theme library with auto system color scheme detection in JavaScript. Features Auto detect Dark / Light mode by

Nov 29, 2022

A super simple and lightweight API to get crypto token live information.

TokenStats 🚀 🚀 A super simple and lightweight API to get crypto token live information. APP URL https://tokenstats.herokuapp.com/ Quick Start To get

Jun 28, 2022

:iphone: A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites

Responsive Boilerplate A powerful, accessible, developer friendly, framework for building responsive websites Responsive Boilerplate is the developers

Dec 22, 2022

tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.

tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.

tb-grid Lightweight (1kb gzipped) 12 column grid system, built with css grid. 👉 Demos & Playground Have a look at those examples: Main Demo: https:/

Dec 28, 2022

Rename image after pasting, support name pattern and auto renaming.

Rename image after pasting, support name pattern and auto renaming.

Obsidian paste image rename This plugin is inspired by Zettlr, Zettlr shows a prompt that allows the user to rename the image, this is a great help if

Jan 2, 2023

This is a website for you to write what you want to do after or done befor and manage it.

This is a website for you to write what you want to do after or done befor and manage it.

Todo List Website This is a website for you to write what you want to do after or done befor and manage it. LogIn SignUp Main Abilities Able To Run Se

Dec 21, 2022
Comments
  • Jsx nested

    Jsx nested

    Fixes #45

    Rewrite jsx parsing logic: divide jsx into serveral parts

    For example

    <div>text {data}</div>
    • __jsxEnter represents the whole jsx tag
    • __jsxTag represents the tag position, it's not inside jsx tag, or it's inside a open or closing tag
    • __jsxExpr represents inside expression
    • __jsxChild() is calculated by others: inside jsx, but not inside tag or expression, then it's jsx children literals

    Chores

    • bump editor version
    • scrolling editor
    • bump next
    opened by huozhi 1
  • breaking change: use css var for token colors

    breaking change: use css var for token colors

    class name of tokens will be removed, instead style: color is added. recommend to control the color with css variables

    :root {
  --sh-class: #2d5e9d;
  --sh-identifier: #354150;
  --sh-sign: #8996a3;
  --sh-string: #00a99a;
  --sh-keyword: #f47067;
  --sh-comment: #a19595;
  --sh-jsxliterals: #6266d1;
}
    opened by huozhi 1
Releases(v0.4.6)

  • v0.4.6(Jun 5, 2022)

    Bug Fixes & Improvements

    • fix missing keyword do #58
    • feat: support unicode #59

    Documentation & Site

    • chore: bump dev deps #60
    • docs: new screenshot #56
    • code frame styles website #57
    Source code(tar.gz)
    Source code(zip)

  • v0.4.5(May 29, 2022)

  • v0.4.4(May 22, 2022)

  • v0.4.3(May 22, 2022)

    Patches

    Support string templates

    • docs: scrollable view by @huozhi in https://github.com/huozhi/sugar-high/pull/49
    • String template by @huozhi in https://github.com/huozhi/sugar-high/pull/50
    • fix: string quotes under string template expr by @huozhi in https://github.com/huozhi/sugar-high/pull/51
    • chore: clean up code by @huozhi in https://github.com/huozhi/sugar-high/pull/52
    Source code(tar.gz)
    Source code(zip)

  • v0.4.2(May 15, 2022)

    Bug Fixes

    • fix: Inconsistent jsx literals by @Yukiniro in https://github.com/huozhi/sugar-high/pull/46
    • Parse nested JSX properly by @huozhi in https://github.com/huozhi/sugar-high/pull/47

    Misc

    • Make demo editor scrollable
    Source code(tar.gz)
    Source code(zip)

  • v0.4.1(Apr 25, 2022)

    Bug Fixes

    • fix: jsx children detection by @huozhi in https://github.com/huozhi/sugar-high/pull/40
    • mark property as identifier by @huozhi in https://github.com/huozhi/sugar-high/pull/41
    • fix: regex mixing with quotes by @huozhi in https://github.com/huozhi/sugar-high/pull/42

    Fixed cases screenshot image

    Documentation

    • docs: adopt editor by @huozhi in https://github.com/huozhi/sugar-high/pull/34
    • site: rename editor pkg and use per page runtime by @huozhi in https://github.com/huozhi/sugar-high/pull/35
    • editor: fix editing experience by @huozhi in https://github.com/huozhi/sugar-high/pull/37
    Source code(tar.gz)
    Source code(zip)

  • v0.4.0(Apr 22, 2022)

    Changelog

    BREAKING CHANGE

    • breaking change: use css var for token colors by @huozhi in https://github.com/huozhi/sugar-high/pull/33

    .sh_<token> class names are removed, instead css variable is supported, you can set the color by adding those css variable to your theme

    image

    Enhancement

    • enhance: remove data-line-number use css counter to implment line number by @huozhi in https://github.com/huozhi/sugar-high/pull/32
    Source code(tar.gz)
    Source code(zip)

  • v0.3.1(Apr 5, 2022)

    Bug Fixes

    • fix: jsx child parse incorrectly when there is no '\n' before '<' by @Yukiniro in https://github.com/huozhi/sugar-high/pull/29
    • fix: matching jsx tags by @huozhi in https://github.com/huozhi/sugar-high/pull/31

    Full Changelog: https://github.com/huozhi/sugar-high/compare/v0.3.0...v0.3.1

    Source code(tar.gz)
    Source code(zip)

  • v0.3.0(Apr 3, 2022)

  • v0.2.2(Apr 2, 2022)

  • v0.2.1(Mar 20, 2022)

    Bug Fixes

    • Fix: detection end of expression #20
    • Fix: pair the quotes of string #21

    Docs & Misc

    • Use pnpm as package manager & github actions
    • Rewrite docs in nextjs by #16 #17
    • Update OG Card #18
    Source code(tar.gz)
    Source code(zip)

  • v0.2.0(Mar 7, 2022)

    Changelog

    Features

    • Add new token type jsxliterals (JSX Literals) which represents the content of JSX.
    • Now it takes regex flags as part of regex itself. e.g.g will be part of /regex/g.

    Performance Improvement

    • Only detect regex and comment once during parsing
    Source code(tar.gz)
    Source code(zip)

  • v0.1.1(Feb 9, 2022)

    0.1.1

    Fixed few bugs of string/regex/comments highlighting

    Enhancement

    • Detect regex based on context
    • Parse comment at one trip
    • Add type declaration
    Source code(tar.gz)
    Source code(zip)

  • v0.0.8(Jan 31, 2022)

    Bug Fixes

    • Fix jsx literals parsing (#6)
    • Fix: inline jsx attributes parsing (#4)

    Website

    Merge the editor with highligh code in one pad. Kudos to @javierbyte for the idea

    Source code(tar.gz)
    Source code(zip)

  • v0.0.6(Jan 30, 2022)

    Changes

    Very fist usable version of sugar-high syntax highlighter

    • Use token type names for CSS class
    • Support parsing JSX
    • Support Classes, numbers and null
    Source code(tar.gz)
    Source code(zip)
Owner
Jiachi Liu
build things in minimalism
Jiachi Liu
GitHub https://sugar-high.vercel.app
Syntax Highlighter bot for Telegram.

??️ Syntax Highlighter Bot Kind of a copy; highly inspired from Piterden/syntax-highlighter-bot - Telegram Bot here Minimal syntax highlighting bot fo

Dunkan 18 Nov 11, 2022
An experimental syntax highlighter web app bot based on Telegram's WebApp update.

Syntax Highlighter WebApp Inspired by zubiden/tg-web-bot-demo. Try the demo bot running here: @syntaxyybot Recently Telegram released a big update for

Dunkan 12 Nov 8, 2022
Syntax Highlighter supporting multiple languages, themes, fonts, highlighting from a URL, local file or post text.

Crayon Syntax Highlighter Supports multiple languages, themes, fonts, highlighting from a URL, local file or post text. Written in PHP and jQuery. Cra

Aram Kocharyan 1.1k Nov 26, 2022
A beautiful Syntax Highlighter.

Shiki Shiki is a beautiful Syntax Highlighter. Demo. Usage npm i shiki const shiki = require('shiki') shiki .getHighlighter({ theme: 'nord' }

Shiki 4.2k Dec 31, 2022
Lightweight (< 2.3kB gzipped) and performant natural sorting of arrays and collections by differentiating between unicode characters, numbers, dates, etc.

fast-natural-order-by Lightweight (< 2.3kB gzipped) and performant natural sorting of arrays and collections by differentiating between unicode charac

Shelf 5 Nov 14, 2022
A JSX transformer with extra hints around interpolations and outer templates.

@ungap/babel-plugin-transform-hinted-jsx This plugin is a follow up of this post and it can be used together with @babel/plugin-transform-react-jsx. A

ungap 12 Nov 12, 2022
Unofficial Library for using Discord.JS with JSX Syntax.

@chooks22/discord.jsx WARNING! This project is in very early stage of development. And while I do have plans to finish it to completion, consider this

Chooks22 4 Nov 14, 2022
Million is a lightweight (<1kb) Virtual DOM. It's really fast and makes it easy to create user interfaces.

?? Watch Video ?? Read the docs ?? Join our Discord What is Million? Million is a lightweight (<1kb) Virtual DOM. It's really fast and makes it easy t

Derek Jones 5 Aug 24, 2022
A lightweight (<1Kb) JavaScript package to facilitate a11y-compliant tabbed interfaces

A11y Tabs A lightweight (<1Kb) JavaScript package to facilitate a11y-compliant tabbed interfaces. Documentation ↗ Demo on Codepen ↗ Features: Support

null 5 Nov 20, 2022
Tiny JavaScript library (1kB) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Zero dependency tiny JavaScript library (1kB bytes) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Yurii De 11 Nov 8, 2022