highlighter

  •        2

Highlighter.js is a tiny (pure javascript) library to allow you to navigate, select and highlight DOM elements.

https://github.com/720kb/highlighter.js

Tags
Implementation
License
Platform

   




Related Projects

put-selector - A high-performance, lightweight function for creating and manipulating DOM elements with succinct, elegant, familiar CSS selector-based syntax

  •    Javascript

This put-selector/put module/package provides a high-performance, lightweight (~2KB minified, ~1KB gzipped with other code) function for creating and manipulating DOM elements with succinct, elegant, familiar CSS selector-based syntax across all browsers and platforms (including HTML generation on NodeJS). The single function from the module creates or updates DOM elements by providing a series of arguments that can include reference elements, selector strings, properties, and text content. The put() function utilizes the proven techniques for optimal performance on modern browsers to ensure maximum speed. would create an element <div class="my-class"> (an element with a class of "my-class").

react-syntax-highlighter - syntax highlighting component for react with prismjs or highlightjs ast using inline styles

  •    Javascript

Check out a small demo here and see the component in action highlighting the generated test code here. There are other syntax highlighters for React out there so why use this one? The biggest reason is that all the others rely on triggering calls in componentDidMount and componentDidUpdate to highlight the code block and then insert it in the render function using dangerouslySetInnerHTML or just manually altering the DOM with native javascript. This utilizes a syntax tree to dynamically build the virtual dom which allows for updating only the changing DOM instead of completely overwriting it on any change, and because of this it is also using more idiomatic React and allows the use of pure function components brought into React as of 0.14.

HTML-GL - Get as many FPS as you need and amazing effects by rendering HTML/CSS in WebGL

  •    Javascript

HTML GL solves "the slow DOM problem" by creating WebGL representations of DOM elements and hiding actual DOM after. This speeds up HTML/CSS animations and transformations by using 3D hardware acceleration and allows to apply OpenGL effects as modern 3D games have. Using HTML GL you still work with HTML/CSS as you are common to, but DOM elements are just facades to their WebGL representations. These GPU accelerated textures are very effective from resources consuming perspective and are very cheap to transform or animate.

etch - Builds components using a simple and explicit API around virtual-dom

  •    Javascript

Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to be minimal, interoperable, and explicit. Etch can be used anywhere, but it was specifically designed with Atom packages and Electron applications in mind.Note that using an Etch component does not require a reference to the Etch library. Etch is an implementation detail, and from the outside the component is just an ordinary object with a simple interface and an .element property. You can also take a more declarative approach by embedding Etch components directly within other Etch components, which we'll cover later in this document.

js-tracker - A chrome extension tracks front-end JavaScript that uses DOM / jQuery APIs to manipulate html dom elements (e

  •    TypeScript

A chrome extension tracks front-end JavaScript that uses DOM or jQuery APIs to manipulate html dom elements (e.g., change style, attach event listener) on web page at runtime. Go to the page you want to track (you can use example page to give it a try).


ramjet - Morph DOM elements from one state to another with smooth animations and transitions

  •    Javascript

npm install ramjet, or download ramjet.js.Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we're transforming to) so that it completely overlaps with the first, then animating the two elements together until the first element (the one we're transitioning from) has exactly the same position and dimensions as the second element originally did.

zoom.js - zoom in on any element in the DOM

  •    HTML

Enables a minimal JS API for zooming in on specific points or DOM elements. Note that this is only a proof of concept so don't use it for anything important. Does not work in IE, yet.

Highlighter - 🖍 Highlight whatever you want!

  •    Swift

🖍 Highlight whatever you want! Highlighter will magically find UI objects such as UILabel, UITextView, UITexTfield, UIButton in your UITableViewCell or other Class. You can search any UIView using view.highlight(text:normal:highlight:type:) It will search subviews for the provided text and highlight them using the attributes provided.

slim.js - Fast & Robust Front-End Micro-framework based on modern standards

  •    Javascript

Slim.js is a lightning fast library for development of native Web Components and Custom Elements based on modern standards. No black magic involved, no useless dependencies. It uses ES6+DOM native API to boosts up HTML elements with superpowers.

ui5-webcomponents - UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice

  •    Javascript

The UI5 Web Components are the new offering of UI5 to provide a set of reusable UI elements to you which can be used for your static web sites or for web application using any web framework of your choice with a minimalistic footprint. They allow you to create a consistent user experience aligned to the SAP Fiori Design Guidelines and incorporate the Fiori 3 design. Web Components are a set of features which allow to enhance the HTML vocabulary with custom HTML elements when the standard HTML elements are not sufficient (for example, a Button with an icon or a DatePicker). The custom HTML elements allow to share those features and qualities in a standard way. The complexity of HTML, CSS and components behavior is encapsulated behind a custom HTML element. The interaction with the custom HTML elements is done using the standard DOM API.

SyntaxHighlighter - Fully functional self-contained code syntax highlighter developed in JavaScript

  •    Javascript

SyntaxHighlighter is THE client side highlighter for the web and web-apps! It's been around since 2004 and it's used virtually everywhere to seamlessly highlight code for presentation purposes. SyntaxHighlighter is currently used and has been used in the past by Microsoft, Apache, Mozilla, Yahoo, Wordpress, Bug Labs, Freshbooks and many other companies and blogs.

rouge - A pure-ruby code highlighter that is compatible with pygments http://rouge.jneen.net/

  •    Ruby

Rouge is a pure-ruby syntax highlighter. It can highlight 100 different languages, and output HTML or ANSI 256-color text. Its HTML output is compatible with stylesheets designed for pygments. If you'd like to help out with this project, assign yourself something from the issues page, and send me a pull request (even if it's not done yet!). Bonus points for feature branches.

ftdomdelegate - Create and manage a DOM event delegator

  •    Javascript

FT's dom delegate library is a component for binding to events on all target elements matching the given selector, irrespective of whether anything exists in the DOM at registration time or not. This allows developers to implement the event delegation pattern. FT DOM Delegate is developed by FT Labs, part of the Financial Times.

MagicPython - Cutting edge Python syntax highlighter for Sublime Text, Atom and Visual Studio Code

  •    Javascript

This is a package with preferences and syntax highlighter for cutting edge Python 3, although Python 2 is well supported, too. The syntax is compatible with Sublime Text, Atom and Visual Studio Code. It is meant to be a drop-in replacement for the default Python package. We are proud to say that MagicPython is used by GitHub to highlight Python.

bel - :dragon: A simple library for composable DOM elements using tagged template strings.

  •    Javascript

A simple library for composable DOM elements using tagged template strings. If you're looking for a higher level front end framework, try yo-yo. Or even higher than that, try choo.

react-track - Track the position of DOM elements. Create cool animations.

  •    Javascript

Avoid it if you can, but for a certain class of (mostly animation-related) problems, you need to query the DOM. This library provides a way to track DOM elements in a functional, declarative manner. It's important to note that AwesomeComponent must be stateful in this example. At the time of writing react-track does not support stateless functional components (SFCs) due to its reliance on the ref attribute, which such components do not provide. In order to track an SFC, wrap it in a TrackedDiv.

document-register-element - A stand-alone working lightweight version of the W3C Custom Elements specification

  •    Javascript

A stand-alone lightweight version of Custom Elements V1 based on top, and compatible with, the battle-tested Custom Elements V0, already used in production with projects such Google AMP HTML ⚡ and others. If you specify noBuiltIn property as true, the V1 API will be polyfilled where needed, but no extra checks and patches will be applied to make custom elements built-in working, since no browser is currently shipping this part of the specification.

scrollMonitor - A simple and fast API to monitor elements as you scroll

  •    Javascript

The scroll monitor allows you to receive events when elements enter or exit a viewport. It does this using watcher objects, which watch an element and trigger events. Watcher objects also contain information about the element they watch, including the element's visibility and location relative to the viewport. If your scroll container is an element other than the body you can create a container that creates watchers. The scroll monitor was designed to be very fast. On each scroll event the DOM is only touched twice, once to find the document height and again to find the viewport top. No variables are declared, nor are any objects, arrays, or strings created. Watchers are very cheap. Create them liberally.

Chartist-js - Simple responsive charts

  •    Javascript

Chartist.js is a simple responsive charting library built with SVG. Its goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website. It's important to understand that one of the main intentions of Chartist.js is to rely on standards rather than providing it's own solution to a problem which is already solved by those standards. We need to leverage the power of browsers today and say good bye to the idea of solving all problems ourselves.

mixitup - A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more

  •    Javascript

MixItUp is a high-performance, dependency-free library for animated DOM manipulation, giving you the power to filter, sort, add and remove DOM elements with beautiful animations. MixItUp plays nice with your existing HTML and CSS, making it a great choice for responsive layouts and compatible with inline-flow, percentages, media queries, flexbox and more.