All Projects → pshihn → Lumin

pshihn / Lumin

Licence: mit
A JavaScript library to progressively highlight any text on a page.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Lumin

kirby-highlighter
🌐 Server-side syntax highlighting for the Kirby code block & KirbyText
Stars: ✭ 18 (-96.7%)
Mutual labels:  highlighting, highlight
Nord Highlightjs
An arctic, north-bluish clean and elegant highlight.js theme.
Stars: ✭ 49 (-91.01%)
Mutual labels:  highlight, highlighting
Highlightr-Plugin
A minimal and aesthetically pleasing highlighting menu that makes color-coded highlighting much easier 🎨.
Stars: ✭ 321 (-41.1%)
Mutual labels:  highlighting, highlight
Mark.js
JavaScript keyword highlighting. Mark text with with options that fit every application. Also available as jQuery plugin.
Stars: ✭ 2,004 (+267.71%)
Mutual labels:  highlight, highlighting
colocat
Fegeya Colocat, Colorized 'cat' implementation. Written in C++17.
Stars: ✭ 14 (-97.43%)
Mutual labels:  highlighting, highlight
react-tagify
📛 Powerful Pure React Component For Hashtags and Mentions In Your React App
Stars: ✭ 24 (-95.6%)
Mutual labels:  highlighting, highlight
remark-highlight.js
Legacy plugin to highlight code blocks with highlight.js — please use `rehype-highlight` instead
Stars: ✭ 58 (-89.36%)
Mutual labels:  highlighting, highlight
Solarized
Solarized color scheme for Sublime Text 3
Stars: ✭ 314 (-42.39%)
Mutual labels:  highlighting
Enlighterjs
🔆 an open source syntax highlighter written in pure javascript
Stars: ✭ 379 (-30.46%)
Mutual labels:  highlighting
Markserv
🏁 serve markdown as html (GitHub style), index directories, live-reload as you edit
Stars: ✭ 304 (-44.22%)
Mutual labels:  highlighting
Python Syntax
Python syntax highlighting for Vim
Stars: ✭ 297 (-45.5%)
Mutual labels:  highlighting
Ictextview
UITextView subclass supporting string/regex search and highlighting
Stars: ✭ 321 (-41.1%)
Mutual labels:  highlighting
Dsync
IDAPython plugin that synchronizes disassembler and decompiler views
Stars: ✭ 399 (-26.79%)
Mutual labels:  highlight
Lowlight
Virtual syntax highlighting for virtual DOMs and non-HTML things
Stars: ✭ 310 (-43.12%)
Mutual labels:  highlight
React Pdf Highlighter
Set of React components for PDF annotation
Stars: ✭ 448 (-17.8%)
Mutual labels:  highlighting
React Native Walkthrough Tooltip
An inline wrapper for calling out React Native components via tooltip
Stars: ✭ 299 (-45.14%)
Mutual labels:  highlighting
Artplayer
🎨 ArtPlayer.js is a modern and full featured HTML5 video player
Stars: ✭ 484 (-11.19%)
Mutual labels:  highlight
Highlightbracketpair
🔆 Highlight bracket pair plugin for intellij
Stars: ✭ 428 (-21.47%)
Mutual labels:  highlight
Nord Emacs
An arctic, north-bluish clean and elegant Emacs theme.
Stars: ✭ 379 (-30.46%)
Mutual labels:  highlighting
Web Highlighter
✨ A no-runtime dependency lib for text highlighting & persistence on any website ✨🖍️
Stars: ✭ 373 (-31.56%)
Mutual labels:  highlight

LuminJS

A JavaScript library to progressively highlight any text on a page.

Great for when you want users to pay attention to some important text.
It can also be used to show progress of a task − Read something while tasks are being completed.

Related buzz words: Tiny (~1kB gzipped), No-dependency

Visit lumin.rocks to see it in action.

Demo gif

Note: This does NOT modify the user selection.

Install

Download the latest from dist folder

or from npm:

npm install --save lumin

Usage

Instantiate lumin with a node. All text under that node, including child nodes, will be highlighted. Then call start to start highlighting.

const luminator = lumin(domNode);
luminator.start(5000); // 5000ms to highlight

Or you can manually control the progress

// Set progress to 50%
luminator.progress = 50;

Note: The node being instantiated with has to be a positioned node. i.e. position is not static for this to work. In most cases, position:relative will do the trick.

Full API

progress

Numeric property one can set to indicate the progress of the highlight. The value is in percentage (0 to 100). This is useful when showing a progress of a task, e.g., a file upload.

start(duration)

Start the highlight.

duration is the approximate time in milliseconds the highlighting should take.

returns a Promise which is resolved when the highlight ends. The resolved value is true if the animation ends without interruption; false if stop was called.

stop()

Stops highlighting if it's in progress.

clear()

Clears the highlighting.

Examples

See it live in action on lumin.rocks or view sample code in the Examples folder.

License

MIT License (c) Preet Shihn

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].